slideToggle только нажатая кнопка

Question

slideToggle только нажатая кнопка

0

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();
    });
});

Мой код довольно прост. Я хочу создать div/show/hide/toggle. Как я могу добиться этого, чтобы только один div с соответствующей кнопкой переключался? Прямо сейчас все мои divs переключаются. Я не хочу назначать уникальные идентификаторы для своих элементов html, потому что элементы переключения будут динамически создаваться позже с помощью php.

Orangutan 13 май 2014, в 14:59

Источник

0

Вы можете определить «один div с соответствующей кнопкой»?
caramba 13 май 2014, в 12:30

Теги:

jquery

3 ответа

0

Вы можете использовать .next() для таргетинга на следующий элемент. Попробуй это:

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

Milind Anantwar 13 май 2014, в 11:11

0

Вы можете использовать первую кнопку nextAll, как показано ниже.

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

Вот работающий JSFiddle

Bhushan Kawadkar 13 май 2014, в 09:33

0

и спасибо вам обоим, они верны. Все здесь ключ!
Orangutan 13 май 2014, в 12:31

Ещё вопросы

Вы можете определить «один div с соответствующей кнопкой»?
и спасибо вам обоим, они верны. Все здесь ключ!

billyonecan · Accepted Answer · 2014-05-13T11-15-00.000Z

Вы можете использовать $(this).nextAll('div.collapse:first'), который получит первое следующее вхождение div.collapse.

.next() не будет работать, так как следующий непосредственный брат - это разрыв строки (<br/>);

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

Здесь скрипка

большое спасибо за это, это сработало
может быть, здесь побочный вопрос, как вы об этом подумали: первый псевдо-селектор? Это трюк CSS?
Это просто псевдокласс, уникальный для jQuery - смотрите здесь