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");
   });
});

标签： javascriptjqueryhtmlcss

Answer 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");
 });
});

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

因此，当单击标题时，toggleClass 将被添加到下一个 DIV 元素