如何將活動班級添加到我選擇的li的父級？

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>

當我選擇li而沒有sub-li時，效果很好。 但是當我選擇另一個li內的li時，它將使子li成為活動對象，而不是父對象。 例如，如果我也想使父對象處於活動狀態，則選擇“捐贈”中的“捐贈中心”。 我應該添加或更改什么以使“ Donate” li也處於活動狀態？

Answer 1

您是否嘗試過使用兒童方法？ 可能對您有用。

我將為此更改您的代碼：

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

在此處查看有關方法孩子的更多信息

Answer 2

幾乎可以想象到的每個嵌套元素交互都有一個Jquery方法...

在您的情況下，最合適的是jQuery的.parentsUntil（） 。

顧名思義，它將選擇每個父級，直到滿足選擇器條件為止。 作為可選的第二個參數，您可以過濾結果，將選擇范圍縮小到所需的元素類型。

因此，您將獲得以下內容：

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

這將以每個父級li目標，直到它達到最高ul 。

Answer 3

嘗試：

$（“＃nav”）。on（“ click”，“ li”，function（）{$（this）.addClass（'active'）;}）;

這將活動類添加到li點擊和li父。