Javascript/Html 显示全部/隐藏所有内容

Question

我正在尝试制作一个“显示全部/隐藏全部”，目前我已经做到了，因此当您单击文本时，它会打开图像和文本，但我想要一个“显示全部”，这样它将展开所有 div。

此时它的工作原理如下:JSFiddle .

    <div class="gwshowhide"><li><a class="printer">Amber Money Printer</a>
        <div class="gwinfo">Level Requirement: 1<br>
        <img src="pic.png"></div>
    </div></li>
    <div class="gwshowhide"><li><a class="printer">Moonstone Money Printer</a>
        <div class="gwinfo">Level Requirement: 5<br>
        <img src="pic1.png"></div>
    </div></li>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    $(function () {
<script>
        $('.printer').click(function () {
            $(this).siblings('.gwinfo').slideToggle('slow')
        })
    })
</script>

一般来说:我想添加一个显示全部/隐藏所有文本，可以一次打开所有/隐藏所有这些文本，我还想保留当前系统，以便当您单击一个时，它会打开/关闭它。谢谢!

Answer 1

这是一个fiddle让您开始。我在下面概述了您需要的一般要点。

本质上，您需要两个组件。

首先，HTML。这只是另一个 anchor ，单击即可切换显示/隐藏全部。

<a class="toggle-all">Show All</a>

第二，您需要在该新 anchor 上发生一个事件来触发您拥有的功能，但对于所有选项。

$('.toggle-all').click(function() {
    $('.printer').each(function () {
        $(this).siblings('.gwinfo').slideToggle('slow');
    });
});

从那里，您可能需要添加一些内容来切换文本，例如:

if (open) {
    $('.toggle-all').text('Hide all');
} else { ... }

额外提示:在 JavaScript 中，始终在行尾添加分号。尽管 JS 会自动插入它们，但它可能会导致难以调试的问题，并在某些情况下使 IE 死机。