Home/ Questions/Q 1045179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-16T15:56:42+00:00

When I hover over the parent links in my menu the class toggle-active is

  • 0

When I hover over the parent links in my menu the class “toggle-active” is added to a span tag so the arrow image is changed. I also want this class to be added to the span tag when I’m hovering over the child links of the parent link inside the .sub-menu container, but I cannot get it to work. Here is the structure of the menu with the jQuery I’m using::

jQuery(".sub-menu").hide(); 

jQuery("#gallery-nav").find("li").each(function() {

  if (jQuery(this).find("ul").length > 0) {

    jQuery("<span class=\"gallery-toggle-button\">").appendTo(jQuery(this).children(":first"));

    jQuery("#gallery-nav li a").hover(function(){
      jQuery(this).children(".gallery-toggle-button").addClass("toggle-active");
    }, function () {
      jQuery(this).children(".gallery-toggle-button").removeClass("toggle-active");
    });

    jQuery("#gallery-nav li a").hover(function(){
      jQuery(this).next("ul").slideDown('fast');
    });

    jQuery("#gallery-nav li ul").hover(function(){
      jQuery(this).slideDown('fast');
    }, function () {
      jQuery(this).slideUp('fast');
    });

    jQuery("#gallery-nav li ul").hover(this).prev(function(){
      jQuery("#gallery-nav li a").children(".gallery-toggle-button").addClass("toggle-active");
    }, function () {
      jQuery("#gallery-nav li a").children(".gallery-toggle-button").removeClass("toggle-active");
    });
  };
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <a href="#">Link 1 <span class="toggle-active"></span></a>
    <ul class="sub-menu">
      <li><a href="#">Sub link 1</a></li>
    </ul>
  </li>
</ul>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I see a few problems.

    .sub-menu

    has that dash so it doesn’t match this ul here

    <ul class="submenu">

    Next, Javascript closures are tricky. In this bit of code here, “this” stops meaning the “li” and starts meaning the element you matched on, which is the “a”.

    jQuery("#gallery-nav li a").hover(function(){
    jQuery(this).children(... // <- "this" now means "a", not "li"

    In other words, you should do it this way

    var top_li = this;
jQuery("#gallery-nav li a").hover(function(){
    jQuery(top_li).children(...

    Finally, I’d just do the whole thing thusly.

    $(function() {
  $(".sub-menu").hide();
  $("#gallery-nav li").each(function() {
    if ($(this).find("ul").length) {
      $(this).addClass("top_menu_li");
      $(this).find("a").eq(0).addClass("top_menu_a").append($("<span/>"));
    }
  });
  $(".top_menu_li").each(function() {
    var top_menu_li = $(this);
    top_menu_li.hover(function() {
      top_menu_li.find(".top_menu_a span").addClass("toggle-active");
      top_menu_li.find(".sub-menu").show();
    }, function() {
      top_menu_li.find(".top_menu_a").removeClass("toggle-active");
      top_menu_li.find(".sub-menu").hide();
    });
  });
});
    <html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("jquery", "1");
    </script>
  </head>
  <body>
    <ul id="gallery-nav">
      <li>
        <a href="#">Link 1</a>
        <ul class="sub-menu">
          <li><a href="#">Sub link 1</a></li>
        </ul>
      </li>
      <li>
        <a href="#">Link 2</a>
        <ul class="sub-menu">
          <li><a href="#">Sub link 2</a></li>
        </ul>
      </li>
    </ul>
  </body>
</html>

    Edited

    Now it adds the classes and spans. ghostpool, “find” targets children, so it only shows the correct sub navigation. Copy and paste that HTML and try it for yourself.

    • 0