单击时我无法关闭菜单

Question

我试图对导航菜单（打开和关闭）进行操作，这是我的代码：

在这里，当我在外部单击时，我可以打开该项目并将其隐藏，但是当我单击链接.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

尝试使用 css class 隐藏/显示您的导航栏，这将是一种简单有效的管理方式。

也将$(document).mouseup替换为$(document).click (document).click ，你只需要点击事件，所以我建议避免在这种情况下使用mouseup 。

你可以这样做：

 $(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>

单击导航栏外部，它将被关闭。 这只是一个DEMO ，可以帮助您了解如何通过单击事件来隐藏/显示元素。

Answer 2

这是一个解决方案

如果没有子菜单，用 class 关闭所有父 uls 显示

我还将 if 转换为切换

 $('.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

尝试这个

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