Question

我目前正在使用jQuery切换来在show和hide之间切换。它适用于各个元素。当我尝试展开全部并且全部折叠时，除了一个之外的所有条件都可以正常工作。如果任何单个元素已经展开或折叠，它会切换它们，但不会像预期的那样。也就是说，当我点击展开全部时，它会展开除已经展开的单个元素之外的所有元素，然后折叠，反之亦然。我该如何处理这种情况？

<script type="text/javascript">
    $(".toggle_container").hide();
    $("div.description-content-title").toggle(function () {
        $(this).addClass("collArrow");
    }, function () {
        $(this).removeClass("collArrow");
    });
    $("div.description-content-title").click(function () {
        $(this).next(".toggle_container").slideToggle("slow");
    });

    $(".close-all").toggle(function () {
        $(".close-all a").text("[Expand All]");
    }, function () {
        $(".close-all a").text("[Close All]");
    });

    $(".close-all").click(function () {
        $(".toggle_container").slideToggle("slow");
    });
</script>

HTML：

<div class="news-top-head">
    <div class="time-head sortable" data-sort-column="ContentDate">
        <span style="float: left; width: auto;">Time</span> <span class="sort-order-hidden ui-icon" />
    </div>
    <div class="description-head sortable" data-sort-column="ContentTitle">
        <span style="float: left; width: auto;">Description</span> <span class="sort-order-hidden ui-icon" />
    </div>
    <div class="close-all">
        <a href="#">close all</a>
    </div>
    <div class="clear">
    </div>
</div>

<div class="description-content">
    <div class="description-content-title expArrow"><%=breakingNews[index].ContentTitle%></div>
        <div class="toggle_container">
            <p ><%=breakingNews[index].ContentDescription%></p>
        </div>
    </div>
</div>

如果您有任何代码示例，那将非常有用。

Answer 1

在这种情况下，您不能使用为所有关闭按钮切换，除非您添加一个额外的类来找出奇怪的一个并忽略它。最简单的方法是使用slideDown(）和slideUp()代替slideToggle()。删除以下代码：

$(".close-all").click(function () {
    $(".toggle_container").slideToggle("slow");
});

并改变：

$(".close-all").toggle(function () {
    $(".close-all a").text("[Expand All]");
}, function () {
    $(".close-all a").text("[Close All]");

});

要：

$(".close-all").toggle(function () {
    $(".close-all a").text("[Expand All]");
    $(".toggle_container").slideDown("slow");
}, function () {
    $(".close-all a").text("[Close All]");
    $(".toggle_container").slideUp("slow");
});

Answer 2

如果有用，请查看此代码，

jQuery(document).ready(function($) {
    $("#toggle_container").hide();
});
function showSlidingDiv(){
    $("#toggle_container").animate({"height": "toggle"}, { duration: 500 });
}

如果需要，也可以参考Show-Hide div content using jQuery ..

切换ExpandAll / CollapseAll

2 个答案: