slideToggle多個div

Question

我有這個代碼

 jQuery(function ($) { //After it toggle the content with this button $('.content_toggle').hide(); $(".link-toggle").click(function () { $(this).nextAll(".content_toggle").slideToggle("slow"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="link-toggle">Read more</div> <div class="content_toggle"> Hello world </div> <div class="link-toggle">Read more again ?</div> <div class="content_toggle"> Another Hello world </div> 

我想一個個地切換這些內容，就像當我單擊第一個div時一樣，其后續內容也會切換。 然后，如果單擊第二個div，則會切換其后續內容。

兩者不能同時使用。

Answer 1

將您的nextAll更改為next，以便僅定位緊隨其后的課程，而不是其下面的每個課程

$(this).next(".content_toggle").slideToggle("slow");

Answer 2

給他們id並使用他們的id來切換

jQuery(function ($) {

//After it toggle the content with this button, and use next instead of nextAll
$('.content_toggle').hide();

    $("#myfirstDiv").click(function () {
           $(this).next(".content_toggle").slideToggle("slow");
    });
    $("#mysecondDiv").click(function () {
           $(this).next(".content_toggle").slideToggle("slow");
    });



});

Answer 3

包裹

<div>
    <div class="link-toggle">Read more</div>
    <div class="content_toggle">
      Hello world
    </div>
</div>

在<div> 。

然后使用siblings方法：

$(".link-toggle").click(function () {
    $(this).siblings(".content_toggle").slideToggle("slow");
    });
});

Answer 4

不要使用nextAll ，只需使用next 。

 jQuery(function ($) { //After it toggle the content with this button $('.content_toggle').hide(); $(".link-toggle").click(function () { $(this).next(".content_toggle").slideToggle("slow"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="link-toggle">Read more</div> <div class="content_toggle"> Hello world </div> <div class="link-toggle">Read more again ?</div> <div class="content_toggle"> Another Hello world </div> 

Answer 5

它完全按照您說的應該做。 此“ nextAll”將在所有后續同級中執行該動作。 參見文檔： https ： //api.jquery.com/nextAll/

不要使用nextAll，而是僅使用next即可獲得所需的效果。