Блог

Я пытался привязать $.click обработчик к родственному элементу, но, похоже, не могу найти способ правильно выбрать элемент для анимации. Вот базовая структура дерева DOM, с которым я работаю:

 <section id="a">
    <div id="b" class="foo" draggable="true">
        <header style="cursor:pointer;">1.</header>
        <p class="foo">Bar</p>
    </div>
    <div id="c" class="foo" draggable="true">
        <header style="cursor:pointer;">2.</header>
        <p class="foo">Bar</p>
    </div>
    <!-- and so on... -->
</section>
  

Теперь, когда пользователь нажимает на <header> , я бы хотел, чтобы брат <p> выполнил jQuery.slideToggle() . На данный момент у меня есть следующий JavaScript, но безрезультатно:

 $('header').click(function() {
    $(this).parent().children("p").slideToggle('slow');
    // I also tried:
    $(this).parent().children("p.foo").slideToggle('slow');
    // but as I expected, there was no difference.
});
  

Итак, чтобы уточнить, очень затянутая версия этого была бы:

 $('div#b.foo header').click(function(){
    $('div#b.foo p.foo').slideToggle('slow');
});
$('div#c.foo header').click(function(){
    $('div#c.foo p.foo').slideToggle('slow');
});
// ...
  

Пожалуйста, попросите меня уточнить, если это недостаточно ясно.

Вы можете попробовать

 $('header').click(function() {
    $(this).next().slideToggle('slow');
});
  

Живой пример

.next

Я решил проблему, инициализировав обработчик кликов в document ready. Решение заключается в следующем:

 $(document).ready(function() {
    $('header').click(function() {
        $(this).next().slideToggle('slow');
    });
});