側邊欄菜單中的粗體子菜單項

Question

我按照下面的說明創建了我需要的東西，但我還想滿足一個額外的要求。

突出顯示當前頁面的導航菜單

我的子菜單項是與主菜單項位於同一頁面上的錨鏈接。 例子：

 $(function() { var url = window.location.href; $(".imagingmenu a").each(function() { if (url == (this.href)) { $(this).closest("li").addClass("active"); $(this).closest("li").parent().parent().addClass("active"); } }); });

 .imagingmenu ul li.active a, .imagingmenu ul li a:hover { font-weight:bold; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="imagingmenu"> <ul> <li><a href="http://exampleurl-1.com">Menu item 1</a> <li><a href="#">Menu item 2</a> <ul> <li><a href="#/#submenuitem1">Submenu Item 1</a></li> <li><a href="#/#submenuitem2">Submenu Item 2</a></li> <li><a href="#/#submenuitem3">Submenu Item 3</a></li> </ul> </li> </ul> </div>

當您在子菜單項上輸入 hover 時，您可以看到粗體效果，但是當它們被單擊並處於活動狀態時，我只想將那個子菜單項加粗，而另一個不加粗。 但是，當任何子菜單項處於活動狀態時，列表中的所有子菜單項均以粗體顯示。 我怎樣才能實現我正在尋找的東西？

謝謝。

Answer 1

這是你的問題：
$(this).closest("li").parent().parent().addClass("active");

當您單擊“子菜單項”（例如“子菜單項 2”）時，您的代碼會將active的 class 添加到該項目，但它還會將active的 class 添加到被單擊的<li>的父級.

<li>的父級是封閉的<ul>而它的父級是
<li><a href="#">Menu item 2</a>所以你最終得到的是這個（注意添加active class的地方）

<ul>
    <li><a href="http://exampleurl-1.com">Menu item 1</a>

    <li class="active"><a href="#">Menu item 2</a>

    <ul>
        <li><a href="#/#submenuitem1">Submenu Item 1</a></li>
        <li class="active"><a href="#/#submenuitem2">Submenu Item 2</a></li>
        <li><a href="#/#submenuitem3">Submenu Item 3</a></li>
    </ul>

    </li>
</ul>

“菜單項 2”的<li>獲得active class 因此根據 CSS 規則它是粗體
.imagingmenu ul li.active a

也就是說，整個<li>包括它的所有子元素——內部的<ul>和它的所有<li>都是粗體。

嘗試如下注釋該行（我還添加了一些console.log()以便我可以看到它在做什么）

$(function() {
    var url = window.location.href;
    $(".imagingmenu a").each(function() {
        console.log(`this.href=${this.href} compare to url ${url}`);
        if (url == (this.href)) {
            console.log('this is', $(this));
            console.log('this.closest(li) is', $(this).closest('li'));
            $(this).closest("li").addClass("active");
            //$(this).closest("li").parent().parent().addClass("active");
        }
    });
});

您可能還會遇到問題，因為添加 hash #目標不會重新加載頁面，因此它不會重新運行您的 function。
實際上，就我個人而言，我會以完全不同的方式處理這個問題——我會向列表項添加一個click處理程序； 處理程序接收一個事件參數，您可以使用event.target將“活動”class 添加到被單擊的一個列表項。