Question 196674 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – Showing dropdown menu using class

I have a menu and I am trying to make level 3 for this menu. I need to add a class "show-submenu" for the submenu whose parent the user hovered over and remove that class if the user hovered over another menu item or clicked outside the menu.
For this I use Jquery.

For example, if user hovers li with the Refund policy I need to add the "show-submenu" class to "dropdown-menu" with the Sample page
if user hovers li with the Test page I need to add "show-submenu" class to "dropdown-menu" with the Contact

html

<li  class="menu-item menu-item-has-children nav-item">
<a  href="#" data-toggle="dropdown"class="dropdown-toggle nav-link show" >Pages</a>
<ul class="dropdown-menu show">
        <li class="menu-item  nav-item">
            <a href="http://localhost/login-page/" class="dropdown-item">
                Login page
            </a>
        </li>
        <li class="menu-item menu-item-has-children dropdown nav-item">
            <a href="http://localhost/refund_returns/" class="dropdown-item">
                Refund policy
            </a>
            <ul class="dropdown-menu">
                <li itemscope="itemscope" class="menu-item nav-item">
                    <a href="http://localhost/sample-page/" class="dropdown-item">
                        Sample page
                    </a>
                </li>
            </ul>
        </li>
        <li class="menu-item menu-item-has-children dropdown nav-item">
            <a href="http://localhost/home-logos/" class="dropdown-item">
                Test page
            </a>
            <ul class="dropdown-menu">
                <li class="menu-item nav-item">
                    <a href="http://localhost/kontakt/" class="dropdown-item">
                        Contact
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</li>

Jquery

    jQuery(document).ready(function($) {
  var timeout;

  $('.dropdown-item').mouseleave(function() {
    clearTimeout(timeout);
    $(this).closest('.dropdown-menu').find('.dropdown-menu').first().addClass('show-submenu');
  });

  $('.dropdown-item').mouseenter(function() {
    $(this).closest('.dropdown-menu').removeClass('show-submenu');
  });

  $(document).on('click', function(event) {
    var target = $(event.target);

    // Check if the clicked element is outside the menu
    if (!target.closest('.dropdown-menu').length) {
      $('.dropdown-menu').removeClass('show-submenu');
    }
  });
});

this code has several bugs.

  1. show-submenu added to "dropdown-menu show" ( ) but I need only one that belongs to current li
  2. I need to have only 1 show-submenu and remove it if user hover another menu item
Tags:

2

Answers


  1. 0

    I tested your jQuery code and this is working for me :

    • It adds a show-submenu class to closest parent dropdown-menu when leaving focus on dropdown-item
    • It removes all show-submenu classes on all dropdown-menu when entering focus on a dropdown-item
    • It removes all show-submenu classes on all dropdown-menu when clicking away from the menu
    jQuery(document).ready(function($) {
      var timeout;
    
      $('.dropdown-item').mouseleave(function() {
        $(this).closest('.dropdown-menu').addClass('show-submenu');
      });
    
      $('.dropdown-item').mouseenter(function() {
        clearTimeout(timeout);
        $('.dropdown-menu').removeClass('show-submenu');
      });
    
      $(document).on('click', function(event) {
        var target = $(event.target);
    
        // Check if the clicked element is outside the menu
        if (!target.closest('.dropdown-menu').length) {
          $('.dropdown-menu').removeClass('show-submenu');
        }
      });
});

    closest() already get the first element that matches the selector by
    testing the element itself and traversing up through its ancestors in
    the DOM tree

    Login or Signup to reply.
  2. 0

    You need to add mouseenter and mouseleave on li element instead of dropdown-item so that it would stay visible even if you hover mouse to the child elements.

    The below code will show the submenu when you hover the mouse and hide the same submenu when you leave the mouse from parent.

    jQuery(document).ready(function($) {

  // add mouse event handler to show or hide
  $('.dropdown-item').each(function() {
    $(this).closest('.menu-item').mouseenter(function() {
      $(this).find('.dropdown-menu').addClass('show-submenu');
    }).mouseleave(function() {
      $(this).find('.dropdown-menu').removeClass('show-submenu');
    });
  });

  $(document).on('click', function(event) {
    var target = $(event.target);

    // Check if the clicked element is outside the menu
    if (!target.closest('.dropdown-menu').length) {
      $('.dropdown-menu').removeClass('show-submenu');
    }
  });
});
    .dropdown-menu {
  display: none;
}

.show, .show-submenu {
  display: block;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
  <li class="menu-item menu-item-has-children nav-item">
    <a href="#" data-toggle="dropdown" class="dropdown-toggle nav-link show">Pages</a>
    <ul class="dropdown-menu show">
      <li class="menu-item nav-item">
        <a href="http://localhost/login-page/" class="dropdown-item">
          Login page
        </a>
      </li>
      <li class="menu-item menu-item-has-children dropdown nav-item">
        <a href="http://localhost/refund_returns/" class="dropdown-item">
          Refund policy
        </a>
        <ul class="dropdown-menu">
          <li itemscope="itemscope" class="menu-item nav-item">
            <a href="http://localhost/sample-page/" class="dropdown-item">
              Sample page
            </a>
          </li>
        </ul>
      </li>
      <li class="menu-item menu-item-has-children dropdown nav-item">
        <a href="http://localhost/home-logos/" class="dropdown-item">
          Test page
        </a>
        <ul class="dropdown-menu">
          <li class="menu-item nav-item">
            <a href="http://localhost/kontakt/" class="dropdown-item">
              Contact
            </a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
</ul>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search