Question

$(function() {
    var pgurl = window.location.href.substr(window.location.href
            .lastIndexOf("/") + 1);
    $("#nav ul ul li a").each(function() {
        if ($(this).attr("href") == pgurl || $(this).attr("href") == '')
            $(this).closest('li').addClass('active');
    });

});

这是我正在使用的js

<div id="nav">
    <ul>
        <li class="headerFont"><a href="index.jsp"><b>HOME</b></a></li>
        <li class="headerFont"><a href="link.jsp"><b>HOW TO
                    DONATE</b></a></li>
        <li class="headerFont"><a href="#"><b>DONATE</b></a>         <----- AND THIS SINCE SHOULD
            <ul>                                                            ALSO BE ACTIVE
                <li class="headerFont"><a href="link2.jsp"><b>DONATION    <----- IF I SELECT THIS
                            CENTER <img id="arrow" src="img/arrow.png" />     IT SHOULD BE ACTIVE
                    </b></a></li>
                <li class="headerFont"><a href="link3.jsp"><b>HOW ELSE
                            CAN I DONATE? <img id="arrow" src="img/arrow.png" />
                    </b></a></li>
            </ul>
       </li>
    </ul>
</div>

当我选择没有sub-li的li时，它工作正常。但是当我选择li在其他li中时，它会让孩子活跃但不是父母。如果我想让父母也活跃，例如，如果我选择＆＃34;捐赠中心＆＃34;在里面＆＃34;捐赠＆＃34;。我应该添加或更改什么才能使＆＃34;捐赠＆＃34;李还活跃吗？

Answer 1

你有没有尝试过使用这种方法的孩子？可能对你有用。

我会改变你的代码：

$("#nav ul ul").children("li").each(function() {
    if ($(this).find("a").attr("href") == pgurl || $(this).find("a").attr("href") == '')
        $(this).addClass('active');
});

See more information about method children here

Answer 2

你可以想象几乎每个嵌套元素交互都有一个Jquery方法......

在您的情况下，最合适的是jQuery's .parentsUntil()。

如名称所示，它将选择每个父项，直到满足选择器条件。作为可选的第二个参数，您可以过滤结果，将选择范围缩小到您想要的元素类型。

所以，你会有类似的东西：

$(this).parentsUntil("#nav > ul", "li").addClass("active");

这会定位每个父li，直到它达到最高ul。

Answer 3

尝试：

$（＆＃34;＃nav＆＃34;）。on（＆＃34; click＆＃34;，＆＃34; li＆＃34;，function（）{ $（本）.addClass（＆＃39;有源＆＃39）; }）;

这会将有效课程添加到点击的li和li家长。

如何将活动类添加到我选择的li的父级？

3 个答案: