Question

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

当用户切换div时，它会扩展高度，我也希望前一个切换回来。所以，我需要选择所有的兄弟姐妹，但我只想针对已扩展的div，再次缩小它的高度。

如果高度超过99 px，我想使用条件选择扩展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' });
 });

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/

.toggle（）所有高度超过99px的div

2 个答案: