Question

我想编写一个函数来扩展和折叠div。虽然这并不是那么简单。如果div高于50px，我需要添加一个图标（“展开”）以允许将其扩展到一个完整的高度。当它完全展开时，我需要将图标的样式更改为（“折叠”）并将其折叠回50px。图标需要位于div的右下角。

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

现在，我可以获得div的高度，但我如何为页面上的每个人执行此操作？

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>

Answer 1

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

链接："More Info" Style Accordion

Answer 2

要获取所有相关的div，请执行以下操作：

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')
});

Answer 3

$(".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 ?
        }
    });

}

要获取单击的元素，您将事件变量分配给函数click并通过调用e.target获取元素

nearest（）将选择与选择器'.myDiv'匹配的第一个父元素。

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

使用/ jQuery进行部分到完全展开/折叠

3 个答案: