部分或全部展开/折叠w/jQuery

问题描述：

我想写一个函数来允许展开和折叠div。尽管如此，它并不那么直截了当。如果div高于50px，我需要添加一个图标（“展开”）以允许将其展开至全高。当它完全展开时，我需要将图标的样式更改为（“折叠”）并将其折叠回50px。该图标需要位于div的右下角。部分或全部展开/折叠w/jQuery

我可以在一个页面上有多个这样的div。

现在，我可以得到一个div的高度，但我怎么做的页面和onload上的每一个？

var divHeight = $('.myDiv').height(); 

if (divHeight > 50) { 
    $('.icon_collase').appendTo('.myDiv'); 
} 

<style> 
.collasedDiv { 
    max-height:50px; 
} 
</style> 

$(".icon_collase").click(function() { 
    $('.icon_collase').toggleClass('icon_collase icon_expand'); 
    $('.myDiv').addClass('collasedDiv'); 
} 

<div class="myDiv"> 
// content here 
</div> 

<div class="myDiv"> 
// another content here 
</div>

答

我不确定任何人都会为你编写整个代码，但这里有一组手风琴项目，我用一个“显示更多”链接编程了更长的项目。您可以将其用作90％的起点，并计算出其他10％。

链接："More Info" Style Accordion

答

$(".icon_collase").click(function(e) { 
    $(e.target).toggleClass('icon_collase icon_expand'); 
    $(e.target).closest('.myDiv').addClass('collasedDiv'); 

    $(".myDiv").each(function(){ 
     var divHeight = $(this).height(); 

     if (divHeight > 50) { 
      $(this).append('icon_collase');// you might want to edit this icon_collase should be a html element ? 
     } 
    }); 

}

获取该元素被点击你的事件变量分配给功能点击，并通过调用e.target

最接近（）会选择第一个获得元素父元素匹配选择器'.myDiv'。

执行单击时，您将遍历每个.myDiv以查找其高度，因此$（this）表示正在与之交互的div。

这不会解决切换功能的问题 - 因为它会切换每个div，而不是点击div – 2011-04-14 20:44:15

另外，由于'.appendTo'没有传递一组对象，因此它只会将给定的折叠元素追加到最后一个运行的元素上（它会每次删除/追加） – 2011-04-14 20:47:06

正确。我编辑了代码 – 2011-04-14 20:51:17

答

要获得所有相关的申报单，这样做：

var $YourDivs = $('.myDiv').filter(function(){ return $(this).height() > 50; });

然后，你需要一些东西附加到他们每个人是这样的：

// since we're passing in a set, jquery will clone '.icon-collase' for you 
$('.icon_collase').appendTo($YourDivs);

类的切换功能，然后添加到所有崩溃图标：

$(".icon_collase").click(function() { 
    $(this).closest('.myDiv').toggleClass('icon_collase icon_expand') 
});

部分或全部展开/折叠w/jQuery

相关推荐