Question

我有一个问题。我有这个HTML。在readmore框中，有很多内容。而且我在网页上有更多.readmore-open链接和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。

用jquery打开最近的容器div

2 个答案: