slideToggle несколько дивы

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

дать им идентификатор и использовать свои идентификаторы для переключения

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 2

Измените свой nextAll на следующий только предназначаться непосредственно следующий не классовый каждый класс ниже его

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

Answer 3

Wrap

<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» будет выполнять действие во всех последующих братьях и сестрах. См. Doc: https://api.jquery.com/nextAll/

Не используйте nextAll, а просто рядом, чтобы получить желаемый эффект.