Bold submenu items in sidebar menu

Question

I followed the explanation below to create what I needed, but there is an additional requirement i am trying to fulfill.

highlight the navigation menu for the current page

My submenu items are anchor links on the same page as the main menu item. Example:

$(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>

You can see the bolding works when you hover over the submenu items, but when they are clicked and active, I want just that submenu item to be bolded and the other not to be. However, when any of the submenu items are active, all of them in the list are bolded. How can I achieve what I'm looking for?

Thanks.

When you create your code snippet, there's an option on the left to import jQuery + other libraries, so that your code snippet will actually run. — Alicia Sykes, May 04 '22 at 21:08
With your use of `.parent().parent()` you are going up 2 levels in the DOM tree from the `li` selected by `$(this).closest("li")` — So you are adding **active** to the `

score 1 · Answer 1 · answered May 05 '22 at 01:30

This is your problem:
$(this).closest("li").parent().parent().addClass("active");

When you click on a "Submenu Item" such as "Submenu Item 2" your code adds the active class to that item, but it also adds the active class to the parent-of-the-parent of the <li> that was clicked.

The parent of the <li> is the enclosing <ul> and the parent of that is the
<li><a href="#">Menu item 2</a> so what you end up with is this (notice the places where the active class was added)

<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>

The <li> for "Menu item 2" gets the active class so it is bold according to the CSS rule
.imagingmenu ul li.active a

That is, the whole <li> including all its children — the inner <ul> and all its <li>s are bold.

Try commenting out that line as below (I also added some console.log()s so I could see what it was doing)

$(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");
        }
    });
});

You may also have a problem because adding the hash # target doesn't reload the page so it doesn't re-run your function.
In reality I, personally, would handle this completely differently — I'd add a click handler to the list items; the handler receives an event parameter, and you can use the event.target to add the "active" class to the one list item that was clicked.

Bold submenu items in sidebar menu

1 Answers1