auto close submenus in jQuery

Question

I am trying to make a jQuery dropdown menu for mobile view. I am new to jQuery and I used Toggle to hide and show submenus. My problem is when I click one menuitem other submenu doesn't close automatically. For example, If I click on menutwo I want menuone to close automatically. How can I do that ? Please help.

jQuery(document).ready(function($) {
  $(".menuone").click(function() {
    $(".submenuone").toggle(200);
  });
  $(".menutwo").click(function() {
    $(".submenutwo").toggle(200);
  });
  $(".menuthree").click(function() {
    $(".submenuthree").toggle(200);
  });

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-menu" class="menu dropdown-menu">
  <li class="menuone"><a href="#"> About Us</a>
    <ul class="submenuone">
      <li>Company Overview</a>
      </li>
    </ul>
  </li>
  <li class="menutwo"><a href="#">Solutions</a>
    <ul class="submenutwo">
      <li> Receivable Finance and Collections</li>
      <li> Workers Comp Financing></li>
    </ul>
  </li>
  <li class="menuthree"><a href="#">Provider Type</a>
    <ul class="submenuthree">
      <li> Doctors</a>
      </li>
      <li> Pharmacy</a>
      </li>
    </ul>
  </li>
</ul>

You should use a good editor or an HTML validator. You have several stray closing tags. — isherwood, Jul 10 '23 at 18:21

score 0 · Accepted Answer · answered Jul 10 '23 at 18:12

I would just use event delegation and find the other UL and close them.

jQuery(document).ready(function($) {
  $("#menu-menu").on("click", "> li", function () {
     $("#menu-menu > li").not(this).find("ul").hide(200);
     $(this).find("ul").toggle(200);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu-menu" class="menu dropdown-menu">
  <li class="menuone"><a href="#"> About Us</a>
    <ul class="submenuone">
      <li>Company Overview</a>
      </li>
    </ul>
  </li>
  <li class="menutwo"><a href="#">Solutions</a>
    <ul class="submenutwo">
      <li> Receivable Finance and Collections</li>
      <li> Workers Comp Financing></li>
    </ul>
  </li>
  <li class="menuthree"><a href="#">Provider Type</a>
    <ul class="submenuthree">
      <li> Doctors</a>
      </li>
      <li> Pharmacy</a>
      </li>
    </ul>
  </li>
</ul>

score -1 · Answer 2 · answered Jul 10 '23 at 17:54

Made it finally.

Here is my answer

jQuery(document).ready(function($) {
  $(".menuone").click(function() {
  $(".submenuone").toggle(200);
  $(".submenutwo, .submenuthree").hide(200); // Hide other submenus
  });

$(".menutwo").click(function() {
$(".submenutwo").toggle(200);
$(".submenuone, .submenuthree").hide(200); // Hide other submenus
});

$(".menuthree").click(function() {
$(".submenuthree").toggle(200);
$(".submenuone, .submenutwo").hide(200); // Hide other submenus
});
});

This is much more verbose than the established pattern epascarello has [shown](https://stackoverflow.com/a/76656304/1264804). — isherwood, Jul 10 '23 at 18:17

auto close submenus in jQuery

2 Answers2