javascript - 切换全部展开/全部折叠

Question

我目前正在使用 jQuery 切换在显示和隐藏之间切换。它对于单个元素来说效果非常好。当我尝试展开全部并折叠全部时，除了一个条件之外，它对所有条件都适用。如果任何单个元素已经展开或折叠，它确实会切换它们，但不会按预期进行。也就是说，当我单击“全部展开”时，它会展开所有元素，除了已展开的单个元素之外，该元素会折叠起来，反之亦然。我该如何处理这种情况？

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