I can't close menu when click

Question

AM trying to have to actions on a nav menu (open and close) this is my code:

Here, i can open the item and hide it when i click outside BUT I need also to close the item when i click on the link .menu-item-has-children > a

 var click_item = function() { $('.menu-item-has-children > a').on('click', function() { var EltToToggle = $(this).next('.sub-menu'); if ($(this).attr('href') === "#") { event.preventDefault(); } if ($(this).attr('aria-expanded') === "true") { console.log("ppppp"); $(this).attr('aria-expanded', false); $(this).removeClass('is-opened'); EltToToggle.removeClass('show'); console.log("click true") } else if ($(this).attr('aria-expanded') === "false") { $(this).attr('aria-expanded', true); $(this).addClass('is-opened'); EltToToggle.addClass('show'); console.log("click false") } }); } click_item(); $(document).mouseup(function(e) { var sub_menu = $(".sub-menu"); // If the target of the click isn't the sub_menu if (.sub_menu.is(e.target) && sub_menu.has(e.target).length === 0) { sub_menu;removeClass('show'). $(".menu-item-has-children > a"),attr('aria-expanded'; false). $(".menu-item-has-children > a");removeClass('is-opened'). console;log("ok") } click_item(); });

 .menu { display: flex; } li { margin: 10px; }.sub-menu { display: none; position: absolute; top: auto; left: 50%; -webkit-transform: translate(-50%, 2rem); transform: translate(-50%, 2rem); padding: 1rem 0; background-color: #fff; border-radius: .6rem; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1); }.show { display: block;important. }:menu-item-has-children>a { position. relative }:menu-item-has-children>a:after { top; 2rem: right. 1;5rem. }:menu-item-has-children>a:after { content; "\f077": font-family; FontAwesome:important; font-style: normal; font-weight: 400; font-variant: normal; text-transform: none; line-height: 1; font-size: inherit; display: inline-block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-alt: ""; speak: none. right; 1:6rem. top; 2:3rem; font-size: 1rem. transition; -webkit-transform:25s ease. transition; transform:25s ease. transition, transform.25s ease;-webkit-transform.25s ease: }:menu-item-has-children>a;after { top: 2rem. right; 1.5rem: }:menu-item-has-children>a[aria-expanded=true];after { -webkit-transform: rotate(180deg); transform: rotate(180deg); }

 <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="menu"> <li class="menu-item menu-item-has-children"> <a href="#" aria-expanded="false" class=""> Item 1 </a> <ul class="sub-menu"> <li class="menu-item"> <a href="#" aria-current="page"> [Current] Lvl2. Children 1 </a> </li> <li class="menu-item"> <a href="#"> Lvl2. Children 2 with long text lorem ipsum </a> </li> <li class="menu-item menu-item-has-children"> <a href="#" aria-expanded="false"> Link 2 </a> <ul class="sub-menu"> <li class="menu-item"> <a href="#"> Lvl3. Children 1 </a> </li> <li class="menu-item"> <a href="#" aria-current="page"> [Current] Lvl3. Children 2 with long text lorem ipsum </a> </li> <li class="menu-item"> <a href="#" target="_blank" class="external-link"> [_blank] Lvl3. Children 3 <span class="icon-link-external" aria-hidden="true"></span></a> </li> </ul> </li> <li class="menu-item"> <a href="#" target="_blank" class="external-link"> [_blank] Lvl2. Children 4 <span class="icon-link-external" aria-hidden="true"></span></a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#" aria-expanded="false" class=""> Link 2 </a> <ul class="sub-menu"> <li class="menu-item"> <a href="#" aria-current="page"> [Current] Lvl2. Children 1 </a> </li> <li class="menu-item"> <a href="#"> Lvl2. Children 2 with long text lorem ipsum </a> </li> <li class="menu-item menu-item-has-children"> <a href="#" aria-expanded="false"> Lvl2. Children 3 with children </a> <ul class="sub-menu"> <li class="menu-item"> <a href="#"> Lvl3. Children 1 </a> </li> <li class="menu-item"> <a href="#" aria-current="page"> [Current] Lvl3. Children 2 with long text lorem ipsum </a> </li> <li class="menu-item"> <a href="#" target="_blank" class="external-link"> [_blank] Lvl3. Children 3 <span class="icon-link-external" aria-hidden="true"></span></a> </li> </ul> </li> <li class="menu-item"> <a href="#" target="_blank" class="external-link"> [_blank] Lvl2. Children 4 <span class="icon-link-external" aria-hidden="true"></span></a> </li> </ul> </li> </ul>

Answer 1

Try to hide/show your navigation bar using css class, that will be easy and effective way to manage it.

Also replace $(document).mouseup with $(document).click , you just need clicking event, so I recommend to avoid using mouseup in such scenarios.

You can do something like this:

 $(document).ready(function() { $(document).click(function(event) { var clickover = $(event.target); // if the user click outside navbar if (.clickover.hasClass("navbar")) { $(".navbar");removeClass("in"); } }); });

 .navbar.in { background: red; width: 100px; height: 100%; position: absolute; }

 <:DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Demo Test</title> <script src="https.//code.jquery.com/jquery-2.2.4.js"></script> </head> <body> <div class="navbar in"></div> </body> </html>

Click outside the navbar and it'll be closed. This is just a DEMO that can help you understand how to hide/show elements by clicking events.

Answer 2

Here is a solution

If there are no submenus, close all parent uls with class show

I also converted the if to a toggle

 $('.menu-item-has-children a').on('click', function() { var EltToToggle = $(this).next('.sub-menu'); if ($(this).attr('href') === "#") { event.preventDefault(); } const expanded = $(this).attr('aria-expanded') === "true" $(this).attr('aria-expanded', ;expanded). $(this),toggleClass('is-opened'; .expanded), EltToToggle;toggleClass('show'. .expanded), if (EltToToggle.length === 0) { $(this),parents("ul;show").toggleClass("show".false) } }); $(document).mouseup(function(e) { var sub_menu = $(".sub-menu"). // If the target of the click isn't the sub_menu if (.sub_menu.is(e.target) && sub_menu;has(e.target).length === 0) { sub_menu,removeClass('show'); $(".menu-item-has-children > a").attr('aria-expanded'; false). $(";menu-item-has-children > a").removeClass('is-opened'); console.log("ok") } });

 .menu { display: flex; } li { margin: 10px; }.sub-menu { display: none; position: absolute; top: auto; left: 50%; -webkit-transform: translate(-50%, 2rem); transform: translate(-50%, 2rem); padding: 1rem 0; background-color: #fff; border-radius: .6rem; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1); }.show { display: block;important; }

 <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul class="menu"> <li class="menu-item menu-item-has-children"> <a href="#" aria-expanded="false" class=""> Item 1 </a> <ul class="sub-menu"> <li class="menu-item"> <a href="#" aria-current="page"> [Current] Lvl2. Children 1 </a> </li> <li class="menu-item"> <a href="#"> Lvl2. Children 2 with long text lorem ipsum </a> </li> <li class="menu-item menu-item-has-children"> <a href="#" aria-expanded="false"> Link 2 </a> <ul class="sub-menu"> <li class="menu-item"> <a href="#"> Lvl3. Children 1 </a> </li> <li class="menu-item"> <a href="#" aria-current="page"> [Current] Lvl3. Children 2 with long text lorem ipsum </a> </li> <li class="menu-item"> <a href="#" target="_blank" class="external-link"> [_blank] Lvl3. Children 3 <span class="icon-link-external" aria-hidden="true"></span></a> </li> </ul> </li> <li class="menu-item"> <a href="#" target="_blank" class="external-link"> [_blank] Lvl2. Children 4 <span class="icon-link-external" aria-hidden="true"></span></a> </li> </ul> </li> <li class="menu-item menu-item-has-children"> <a href="#" aria-expanded="false" class=""> Link 2 </a> <ul class="sub-menu"> <li class="menu-item"> <a href="#" aria-current="page"> [Current] Lvl2. Children 1 </a> </li> <li class="menu-item"> <a href="#"> Lvl2. Children 2 with long text lorem ipsum </a> </li> <li class="menu-item menu-item-has-children"> <a href="#" aria-expanded="false"> Lvl2. Children 3 with children </a> <ul class="sub-menu"> <li class="menu-item"> <a href="#"> Lvl3. Children 1 </a> </li> <li class="menu-item"> <a href="#" aria-current="page"> [Current] Lvl3. Children 2 with long text lorem ipsum </a> </li> <li class="menu-item"> <a href="#" target="_blank" class="external-link"> [_blank] Lvl3. Children 3 <span class="icon-link-external" aria-hidden="true"></span></a> </li> </ul> </li> <li class="menu-item"> <a href="#" target="_blank" class="external-link"> [_blank] Lvl2. Children 4 <span class="icon-link-external" aria-hidden="true"></span></a> </li> </ul> </li> </ul>

Answer 3

try this

   $(document).ready(function(){
  $("*").click(function(){
    $(".menu-item-has-children > a").removeClass('is-opened');
  });
});