Parent() 也抓取兄弟姐妹

Question

在下页的示例中，我希望将“active”类应用于活动链接的父级：

http ://socalragdolls.com/jquerytest.html

<div id="topnav">
    <ul id="mainmenu">
        <li class="top" id="home"><a href="/">Home</a></li>
        <li class="top"><a href="kittens">Kittens</a>
            <ul id="mainmenu">
                <li><a href="caring">Caring for a Ragdoll</a></li>
                <li><a href="kittens">Current Litter</a></li>
                <li><a href="jquerytest.html">Future Litters</a></li>
                <li><a href="parents">Parents</a></li>
                <li><a href="pricing">Pricing</a></li>
                <li><a href="reserving">Reserving a Kitten</a></li>
            </ul>
        </li>
        <li><a href="about">About Us</a>
            <ul>
                <li><a href="about">Cattery</a></li>
                <li><a href="proprietor">Proprietor</a></li>
                <li><a href="testimonials">Testimonials</a></li>
            </ul>
        </li>
        <li class="last"><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

本质上，当访问者在页面上（jquerytest.html）时，我希望父级“Kittens”也处于活动状态。

这是当前的 jQuery：

<script>
    $("#topnav a").each(function() {
        if(this.href == window.location || this.href == document.location.protocol + "//" + window.location.hostname + window.location.pathname)
        $(this).parent('li').addClass('active');
    });
</script>

<script>
    $(document).ready(function() {
        $('li.active').parent().parent().addClass('active');
    });
</script>

如您所见，这突出显示了子 .active li 以及父级的所有兄弟姐妹，这是我绝对不想要的。

有什么想法吗？

Answer 1

它不会选择所有内容。

它仅选择父级。问题在于 .active 的 CSS 规则，它对整个 li 进行样式设置（并且由于 ul 是 li 的子级看起来所有兄弟姐妹都被选中了）。

只需为 .active ul{background-color:white;} 创建一个 css 规则。

---

如果问题在于红色边框而不是背景颜色，那么罪魁祸首就是这部分

$(document).ready(function() {
    $('li ul li.active').siblings().css('border', '1px solid red');
    $('li ul li.active').siblings().css('background-color', '#333');
});

，但这太明显了是真正的问题..

Answer 2

看起来您正在将样式应用于整个 ul，这就是它也“更改”其所有子项的原因...您可能需要重置 background-color在 ul 上使用 CSS。

Answer 3

我认为你的第二个脚本应该是这样的：

编辑

$('li.active').closest("li").find("a").addClass('active');

因此，我们只将 active 类添加到锚点。发生的情况是，您将班级添加到整个李中，其中包括孩子。

希望这有帮助
干杯

Answer 4

它实际上并不是突出显示同级，而是突出显示父 li 及其内部的所有内容。

我会将 active 类放在 kitten 链接上，或者您也可以向父级添加不同的类名，例如 active-trail。

Answer 5

正如Paul所说，父级的整个li都有背景，它封装了子级ul。避免这种情况的一种方法是使用背景图像，该图像仅与父链接一样高，并且不会在 y 轴上重复。