.toggle()所有高度大于99px的div

Question

我正在制作一个手风琴类型的效果，使用切换来扩展和收缩div的高度。

当用户切换div时，它会在高度上扩展，我希望前一个div也会切换回来。因此，我需要选择所有的兄弟，但我只想以已展开的div为目标，再次缩小其高度。

我想用一个条件来选择展开的div，如果高度超过99px，我认为这是只选择展开的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' });
 });    

Answer 1

使用.each()遍历所有同级，您还错误地使用.toggle作为事件名称，而它应该只是toggle，如下所示：

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

Answer 2

我觉得你把事情复杂化了。您可以使用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/