使用 jquery 多次显示/隐藏 div答案

【问题标题】：Show/hide a div with jquery multiple times使用 jquery 多次显示/隐藏 div
【发布时间】：2009-09-05 20:32:02
【问题描述】：

我想使用 jquery 从文本链接中显示/隐藏 DIV。

到目前为止，它与我在该网站上找到的示例略有不同的是，我需要一种通用的方法，可以在一个页面上多次执行此操作，并且还能够在任何页面上在整个站点范围内使用它。

如果我可以将 JS 放在单独的文件中并包含在页面中，那就太好了，所以也许可以将它包装到一个函数中？

有人可以帮我吗？为了使其通用，我可以在其中分配一个显示/隐藏的 div，其 id 为 id="toggle-hide-1" 并更改我页面中的数字以使其不同显示/隐藏区域

我可以只使用一个名称来命名 ID，该名称将使函数显示/隐藏一个 div，并将它与在页面上显示/隐藏的其他 div 分开，我可以向它添加一个数字。

下面是部分代码，它将在链接点击时显示/隐藏 div，但这并不是我所需要的。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        $(".tool_block, .view-code").toggle();
    }); 
});
</script>
<a href="#" class="view-code" >view code</a>
<a href="#" class="view-code"  style="display:none">hide code</a> <br  />

<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>

【问题讨论】：

标签： javascript jquery show-hide

【解决方案1】：

最好的方法可能是使用自定义属性。如果你用一个属性标记你的锚点，告诉 jquery 切换哪个 div，编写通用代码来完成这项工作会更容易。

类似这样的：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        var d = $(this).attr("toolDiv");
        $(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle();
    }); 
});
</script>
<a href="#" class="view-code" toolDiv="1" >view code</a>
<a href="#" class="view-code" toolDiv="1" style="display:none">hide code</a> <br  />

<div class="tool_block" toolDiv="1" style="display:none" >
this stuff is hidden until we choose to show it!
</div>

然后给每个锚-div 对赋予一个唯一的 toolDiv 值（不必是数字）。

【讨论】：

这正是我所需要的！一件事是，当您单击链接时，它会将 # 加载到 URL 中，您是否知道如何取消该部分，因为如果您向下滚动任何内容，它会使页面转到最顶部。谢谢
另一件事，你知道是否可以将它包装在一个函数中，我可以将它放在其他地方的文件中，然后在我需要的页面上使用 1 行来调用它？
您可以将该脚本块的内容粘贴到另一个文件中，只要它在jquery库之后加载，它就可以在任何页面上正常工作。无需直接在页面上编写任何 JS。要防止锚点的默认行为，只需将return false; 添加到点击处理程序的末尾即可。

【解决方案2】：

如果你可以将整个集合包装在一个 div 中，那就很容易了。

$(function() {
    $(".view-code").click( function(e) {
        $(this).siblings().andSelf().toggle();
    });
});

<div>
    <a href="#" class="view-code" >view code</a>
    <a href="#" class="view-code"  style="display:none">hide code</a> <br  />

    <div class="tool_block" style="display:none" >
    this stuff is hidden until we choose to show it!
    </div>
</div>

如果它不处理 <br />，您可以将兄弟姐妹过滤为仅 div 和锚元素。

【讨论】：

这确实要求锚点和 div 在标记中有些相关。
只是它们在同一个容器中，但听起来这就是他所追求的。
我确实认为这是一个优雅的解决方案，如果您对 OP 所做的假设是正确的。
唯一的问题是它不允许我拥有多套。这将允许多个 div 的 1 个单击事件，但不允许多组单击事件来改变不同的 div，例如 Joel Potter 的答案
@jasondavis -- 我不确定你的意思。这将对使用“view-code”类装饰的每个元素（在本例中为锚点）应用处理程序。每个单击处理程序将仅适用于容器中的元素以及应用程序处理程序的元素。您可以拥有任意数量的锚/锚/div元组，只要它们被包装在一个div中，这样您就可以使用兄弟()方法来选择与单击的元素关联的那些div和锚。

【解决方案3】：

为什么不使用特定的类呢？您想要显示/隐藏的每个元素都可以有一个名为“toggler”的类，如下所示：

<div class="toggler">
 ...
</div>

然后，您可以使用该类一次切换所有元素的可见性，使用：

$(".toggler").toggle();

在这种情况下，这些元素在文档中的位置，甚至它们是什么类型的元素都没有区别。

如果这个功能需要在全局范围内可用，你总是可以使用自定义函数扩展 jQuery 本身，如下所示：

$.toggleTogglers = function(toggleClass) {
  $("." + toggleClass).toggle();
};

这很好，因为您可以灵活地选择自己设计的切换自定义类。

【讨论】：