使用jquery打开最近的容器div

Question

我有个问题。我有这个html。在阅读框中，有很多内容。和我有更多。阅读更多-打开链接和阅读更多的框在网页上。

<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。