Question

HTML

<button type="button" class="button-collapse" >
    collapsible
</button> </br>
<div id="demo" class="collapse">
    Sample text
</div>

的jQuery

$(document).ready(function() {
    $(".button-collapse").click(function() {
        $(".collapse").slideToggle();
    });
});

我的代码很简单。我想创建一个“show / hide / toggle”div。我怎样才能实现这一点，只有一个div与相应的按钮切换？现在我所有的div都切换了。我不希望为我的html元素分配唯一ID，因为稍后将使用php动态创建切换元素。

Answer 1

您可以使用.next()定位下一个元素。试试这个：

 $(".button-collapse").click(function() {
    $(this).next().slideToggle();
 });

Answer 2

您可以使用nextAll的第一个按钮，如下所示

$(".button-collapse").click(function() {
    $(this).nextAll(".collapse:first").slideToggle();
 });

这是工作JSFiddle

Answer 3

您可以使用$(this).nextAll('div.collapse:first')，这将首次出现div.collapse。

.next()无法工作，因为下一个直接兄弟是换行符（<br />）;

$(".button-collapse").click(function() {
  $(this).nextAll('div.collapse:first').slideToggle();
});