javascript - jQuery show-hide 远近查找下一个元素

Question

此显示隐藏功能尝试匿名执行此操作，无需为目标 div 维护唯一 ID。

我无法理解为什么我的 var div 选择器在示例 #4 中不起作用，以及我如何才能让它在所示的所有示例中都起作用。

$('.expander').click(function(e)
{
    e.preventDefault();
    var div = $(this).nextAll('div.content').first();
    if (div)
    {
        if (div.css('display') == "none")
        {
            div.show();
            $(this).removeClass("closed");
            $(this).addClass("open");
        }
        else
        {
            div.hide();
            $(this).removeClass("open");
            $(this).addClass("closed");
        }
    }
});

<div>
    <a href="#" class="expander open">example 1</a><br />
    <div class="content open">shown content</div>
    <a href="#" class="expander closed">example 2</a><br />
    <div class="content closed">hidden content</div>
    <a href="#" class="expander closed">example 3</a><br />
    <!-- comments -->
    <span>other content</span>
    <div class="content closed">hidden content</div>
    <p>
        <span>
            <a href="#" class="expander closed">example 4</a>
        </span>
    </p>
    <div class="content closed">content</div>
</div>

前三个示例运行良好。但是当我部署这段代码时，我发现 anchor 的编码方式存在差异。我正在寻找一种解决方案，无论 anchor 的封装方式如何。

底线是我想选择下一个 div.content 到 anchor ，不管它是否是下一个，或者 jQuery 是否必须向上移动一点 DOM 树才能找到它。

我有这段代码的工作模型 here .

Answer 1

因为你的 anchor 是 嵌套在一个 span 中，它又嵌套在 一个 ptag 中

这在示例#4 的情况下没有意义
var div = $(this).nextAll('div.content').first();

对于example#4你需要这个选择器

var div = $(this).closest('p').nextAll('div.content').first();