如何展开和折叠多个 div，而不使用 jQuery 重复相同的代码答案

【问题标题】：How to expand and collapse multiple divs, without repeating the same code using jQuery如何展开和折叠多个 div，而不使用 jQuery 重复相同的代码
【发布时间】：2018-10-17 12:24:57
【问题描述】：

我想编写一个代码，一旦您单击其上方的标题文本，就可以展开和折叠带有段落的div。

<div class="container">
<h3><span class="toggler">Text that toggles</span></h3>
<div class="wrapper">
<p>Random text</p>
</div>
</div>

 <div class="container">
<h3><span class="toggler2">Text that toggles</span></h3>
<div class="wrapper2">
<p>Random text</p>
</div>
</div>

我知道我可以编写这样的函数，它可以在 display: block 和 display: none 之间切换。

我可以为具有不同类的不同 div 重复相同的功能，它会起作用，但如果我有很多，我最终会多次重复相同的功能，我觉得必须有一个更清洁方法来做到这一点。

$(document).ready(function() {
$(".toggler").on("click", function() {
    $(".wrapper").toggleClass("active");
   });
});

【问题讨论】：

stackoverflow.com/questions/17460116/…
使用$("[class^='toggler'") 作为第一个选择器，$(this).find(".wrapper") 作为第二个选择器
[attribute^=value] 选择器选择所有 title 属性值以 value 开头的元素，您需要应用 $("[class^='toggler'").on("click", function(){ $(this).next(".wrapper").toggleClass("active"); }); 才能打开上述代码中的所有 .wrapper。
Vikintas Raudavicius 你检查我的答案了吗

标签： javascript jquery html css

【解决方案1】：

如果你使用 jquery & bootstrap，你不需要写一行代码。

解决方案 1：

在下面添加参考：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

你的html：

<div class="container">
    <h3><span class="toggler" data-toggle="collapse" data-target="#col1">Text that toggles</span></h3>
    <div class="wrapper" id="col1">
        <p>Random text</p>
    </div>
</div>

<div class="container">
    <h3><span class="toggler2" data-toggle="collapse" data-target="#col2">Text that toggles</span></h3>
    <div class="wrapper2" id="col2">
        <p>Random text</p>
    </div>
</div>

解决方案 2：

你可以写简单的行代码

$(document).ready(function() {
 $("h3").on("click", function() {
    $(this).next().toggleClass("active");
 });
});

我们可以选择带有header Tag的header。之后，我们可以将工具类添加到下一个元素“DIV”。

所以，当点击标题时，toggleClass 将被添加到下一个元素，即 DIV

【讨论】：

为什么要添加引导程序？它与 OP 的要求无关。
你知道 class="container" 是引导类，这就是添加的原因。

【解决方案2】：

你不需要重复它，给两个单一的类，比如“toggle-enabled”，然后你可以将toggle-enabled作为一个选择器而不是使用toggle和togger2作为两个函数，并且两者都将在点击时运行相同的函数。

如果你只想切换选中的那个，那么使用“this”关键字来获取当前并隐藏和显示它，或者随意滑动它，但不需要重复代码。

这是您的示例代码按预期工作：

$(document).ready(function() {
 $(".toggle-enabled").on("click", function() {
   var nextdiv = $(this).parent().siblings("div");
   nextdiv.is(":visible")?nextdiv.hide():nextdiv.show();
 });
});

.togglethis{color:red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h3><span class="toggler toggle-enabled">Text A that toggles</span></h3>
<div class="wrapper togglethis">
<p>Random text</p>
</div>
</div>

 <div class="container">
<h3><span class="toggler2 toggle-enabled">Text B that toggles</span></h3>
<div class="wrapper2 togglethis">
<p>I have left your toggler2 class in there and you can add more classes to separate it</p>
</div>
</div>

【讨论】：

我已经添加了 parent 以从 span 获取 h3，但是您可以选择任何选择器来获取该容器中的下一个 div，或者您可以在容器上放置一个类来选择它。拥有索引选择器的好处是可以快速找到它，然后遍历和搜索。

【解决方案3】：

此代码应该适用于您的 html：

$(document).ready(function () { 
    $('[class^="toggler"]').on('click', function () { 
        $(this).closest('.container').children('[class^="wrapper"]').toggle();
     });
});

代码会在您的 html 中查找类名以 toggle 开头的任何元素。然后它附加一个点击处理函数。然后该函数查找类名为container 的受影响元素最近的祖先。然后从该祖先/父级中，它选择类名以wrapper 开头的子级。然后它会切换这些孩子（或孩子）的可见性

你可以给你的切换器类名toggleN（其中N是任何有效的类名字符）或简单的toggle（所有类名相同）。同样，您可以将包装器的类命名为 wrapperN 或简单地命名为 wrapper。

【讨论】：