1

我正在制作手风琴式效果，使用切换来扩展和收缩 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' });
 });
4

2 回答 2

3

用于.each()遍历所有兄弟姐妹，您也错误地将.toggle其用作事件名称，而它应该是 just 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 回答