2

此 show-hide 函数尝试匿名执行此操作，而无需为目标 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>

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

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

我在这里有这个代码的工作模型。

4

2 回答 2

1

因为你的anchor是nested inside a span再次嵌套在里面的a ptag

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

例如#4你需要这个选择器

var div = $(this).closest('p').nextAll('div.content').first();
于 2012-10-11T17:03:09.457 回答
0

我让这个工作沿着父树走，直到我看到下一个目标 div。

var div = $(this).nextAll('div.content').first();
if (div.length == 0)
{
    div = $(this).parentsUntil('body').nextAll('div.content').first();
}

我不太喜欢有条件的，但除非我找到更优雅的东西，否则我会坚持下去。

于 2012-10-11T20:24:23.200 回答