1

トグルを使用してdivの高さを拡大および縮小して、アコーディオンタイプの効果を作成しています。

ユーザーが div を切り替えると、高さが拡大し、前のものも元に戻す必要があります。したがって、すべての兄弟を選択する必要がありますが、展開された div のみをターゲットにして、その高さを再び縮小したいと考えています。

高さが99px以上の場合の条件を利用した関数で展開されたdivを選択したいのですが、展開されたdivのみを選択するのが一番良いと思いました。

どこが間違っていますか？

私のコード。

$(function() {
     jQuery.fn.selectOpen = (function(){
         //(this).css('background-color', 'red');
                if ( $(this).height() > 99) {
                $(this).trigger(".toggle");
                }
                });
            }); 


$("#arrow_01").toggle(function(){
$("#arrow_01").attr('src','images/arrow_down.png');
    $("#expanding_box_01").animate({height: '100px',  }).siblings().selectOpen();
 }, function(){     
   $('#arrow_01').attr('src','images/arrow_right.png');
   $("#expanding_box_01").animate( {height: '27px' });
 });
4

2 に答える 2

3

.each()すべての兄弟をトラバースするために使用します。また、次のよう.toggleに、イベント名として誤って使用する必要がありますtoggle。

jQuery.fn.selectOpen = function(){
         //(this).css('background-color', 'red');
         this.each(function() {
             if ( $(this).height() > 99) {
                 $(this).trigger("toggle");
             }
         });
 };
于 2012-10-08T17:12:46.480 に答える
0

あなたはそれを複雑にしすぎていると思います。CSS といくつかのクラスを使用して、アイテムが開いているかどうかを判断できます。

// bind a click event to an anchor tag
$("#accordian li > a").click(function(){        
    var $box = $(this).parent();
    // if the item has the closed class, proceed, otherwise
    // it is already open
    if ($box.is(":not(.open)")) {
        // animate the currently open sibling closed
        // remove the open class
        $box.siblings(".open").animate( {height: '27px' }).removeClass("open");
        // animate the clicked item and add open class
        $box.animate({height: '100px' }).addClass("open");
    }            
}); ​

http://jsfiddle.net/hunter/qSE69/

于 2012-10-08T17:18:04.290 に答える