Открыть ближайший контейнер div с jquery

Question

У меня вопрос. У меня есть этот HTML. В поле "readmore" много контента. И я, как больше.readmore-открытых ссылок и блоков readmore на веб-странице.

<p>
<a href="http://staging.triple-b-it.nl/requirements-management/" title="Lees verder" class="readmore-open">Lees verder</a>
</p>

<div class="readmore-box">

</div>

Теперь мой вопрос. Когда вы нажимаете ссылку.readmore-open. Первая пересылка, то, что потом будет, должно быть показано. У меня есть этот сценарий. Что я делаю не так.

$('.readmore-open').click(function(e){
    $(this).closest('.readmore-box').toggleClass('active');
})

Answer 1

$('.readmore-open').click(function(){
    $(this).closest('p').next('.readmore-box').toggleClass('active');
});

Ваш обход DOM был немного отклонен.

Answer 2

.closest() только ищет дерево DOM для предков текущего выбранного узла (узлов). В этом случае, .readmore-box не является предком и не будет найден.

В настоящее время, как вы структурировали свой HTML, вам потребовалось бы подойти к родителю и затем искать следующего родного брата. Вы можете немного реструктурировать свой HTML, чтобы сделать обход DOM более надежным. Например, если у вас есть элемент на том же уровне, что и братья и сестры, вы можете использовать .next() найти следующего родного брата.

Так, например, перемещая объявление класса до <p>, Вы можете сделать это:

HTML:

<p class="readmore-open">
    <a href="http://staging.triple-b-it.nl/requirements-management/" title="Lees verder">Lees verder</a>
</p>
<div class="readmore-box">...</div>

Javascript:

$('.readmore-open').click(function(e){
    $(this).next('.readmore-box').toggleClass('active');
})

Другой подход заключается в предоставлении общего предка, на которого можно положиться

HTML:

<div class="readmore">
    <p>
        <a href="http://staging.triple-b-it.nl/requirements-management/" title="Lees verder" class="readmore-open">Lees verder</a>
    </p>
    <div class="readmore-box">...</div>
</div>

Javascript:

$('.readmore-open').click(function(e){
    $(this).closest('.readmore').find('.readmore-box').toggleClass('active');
})

Этот второй подход, вероятно, будет более гибким, так как вы можете иметь .readmore-box в основном внутри этого общего предка (до ссылки, на уровне иерархии, отличном от ссылки и т. д.).