1

This issue is kinda similar with this post, but mine is just a simple highlighting one of the menu item by adding a CSS class.

Basically, I'm trying to loop through a list of menu item under #nav-accordion div. When the IF condition is true, I will append active class to the li element.

Here is my code

$("#nav-accordion li a").each(function () {
    if (true) {
        $(this).closest("li").addClass("active");
        // Expand the parent menu
        $(this).closest("li").closest("ul").show();
        // Highlight the parent menu item

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

       // Exit loop when one of the menu item is highlighted
       return;
    }
}

When I load the page without developer tool open in Chrome, the highlight does not work; but when I open the developer tool and load the page, the highlighting work like a magic. Now I don't know how this strange magic work.

This post describe that I should remove any console.log in the code, which I did. But the same problem still persist.

Any idea?

Koo SengSeng
  • 933
  • 3
  • 12
  • 31
  • I believe If(true) need to change to if(true), make the "i" lower case. – Donald Powell Jul 31 '17 at 03:07
  • 1
    Hi @DonaldPowell Thanks for your comment but actually it was just a typo when I type the if statement. In my actual code, the if is in lower case and the condition is longer, so I just shorten it – Koo SengSeng Jul 31 '17 at 03:20
  • Try.. Right-click and Inspect Element to open the DevTools. Now click Network in the toolbar. Finally, check the Disable cache checkbox at the top – Donald Powell Jul 31 '17 at 04:35
  • Can you try to open that page in another web browser or clearing cache ? Maybe it is a browser caching problem – Siwakorn Petchuchuay Jul 31 '17 at 02:53
  • 1
    Hi, I tried IE and Firefox, both behave in the same way as Chrome. I tried CTRL + F5 many times too, but still the same... – Koo SengSeng Jul 31 '17 at 03:46

1 Answers1

0

You can try this in jQuery $( window ).load() event. If you still get the same result try using Using jQuery.when (deferreds) or try using the setTimeout option. I had similar issue and i sorted it with jQuery.when option.

Rijo
  • 2,568
  • 1
  • 22
  • 30