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

您无需重复它，只给一个类，例如“ toggle-enabled”，然后不用将toggler和toggler2用作两个功能，而是可以将toggle-enabled用作一个选择器，并且两者在单击时将运行相同的功能。

如果您只想切换选中的那个，则可以使用“ 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>

Answer 2

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

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

Answer 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。

如何扩展和折叠多个div，而无需使用jQuery重复相同的代码

3 个答案: