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。这只是点击切换显示/隐藏所有内容的另一个锚点。

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

第二次，您需要在该新锚点上启动一个事件来触发您拥有的功能，但是对于所有选项。

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

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

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

额外提示：总是在JavaScript的行尾添加分号。即使JS会自动插入它们，也可能导致难以调试问题以及在某些情况下使IE死掉。

Answer 2

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

并且您的jquery代码将是

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

$('.showall').on('click',function(){
    $('.gwinfo,.gwinfo').slideToggle('slow');

});

Demo

Answer 3

显示/隐藏所有用途：

$('.gwinfo').toggle('slow');

另外，我相信JSFiddle上没有正确关闭“gwinfo”div。

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

3 个答案: