如何擴展和折疊多個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

您無需重復它，只提供一個類，例如“ 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");
 });
});

我們可以選擇帶有標頭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 。