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

Question

我想编写一段代码，当您单击其上方的标题文本时，它可以展开和折叠带有段落的 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");
   });
});

Answer 1

如果您使用 jquery 和 bootstrap，则无需编写单行代码。

解决方案一:

在下面添加引用:

<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。之后，我们可以将 toogleClass 添加到下一个元素“DIV”。

因此，当点击 header 时，toggleClass 将被添加到下一个 DIV 元素