Jquery 没有关闭下拉菜单 [英] Jquery is not closing drop-down

查看：34
本文介绍了Jquery 没有关闭下拉菜单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在构建带有 Bootstrap 导航栏的多级(仅第二级)下拉菜单.我可以找到一个指南来构建多级下拉菜单.

JSFiddle 链接

但是，下拉菜单不会在点击时关闭.可以通过单击 Document 来关闭下拉菜单，我在 jquery 下面添加了.

$(document).click(function(){$('.dropdown-menu').removeClass('show');});

下拉列表关闭，但是，当在其他 nav-item 中单击时，打开的下拉列表不会关闭.所以，我缺少基本的 JQuery.当在其他 nav-item 中单击时，基本上 show 类不会从 .dropdown-menu 类中删除.所以，我想从 .dropdown-menu

中删除 show 类

我正在寻找工作 JS 或 Jquery 代码，上面的 Jquery 被破坏的代码复制从 staoverflow.所以，寻找完整和干净的解决方案

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {如果 (!$(this).next().hasClass('show')) {$(this).parents('.dropdown-menu').first().find('.show').removeClass('show');}var $subMenu = $(this).next('.dropdown-menu');$subMenu.toggleClass('show');返回假；});$(document).click(function() {//$('.dropdown-menu').toggleClass('show');$('.dropdown-menu').removeClass('show');});$('.dropdown').click(function(event){event.stopPropagation();});

.dropdown-submenu {位置:相对；}.dropdown-submenu a::after {变换:旋转(-90度)；位置:绝对；右:6px；顶部:.8em；}.dropdown-submenu .dropdown-menu {顶部:0；左:100%；左边距:.1rem；右边距:.1rem；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjDVKHr8RsHpdmTcrossorigin="匿名"><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" 完整性="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyKforiginF0x"匿名"></script><nav class="navbar navbar-expand-md navbar-dark bg-primary py-1"><div class="container-fluid"><div class="flex-row d-flex"><a class="navbar-brand" href="#">Brand</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span><div class="navbar-collapse collapse" id="navbarSupportedContent"><ul class="navbar-nav"><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">小狗</a><ul class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><li><a class="dropdown-item" href="#">Bulldog</a></li><li><a class="dropdown-item" href="#">Al</a></li><li><a class="dropdown-item" href="#">拉布拉多犬</a></li><li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Puppies</a><ul class="下拉菜单"><li><a class="dropdown-item" href="#">Husky</a></li><li><a class="dropdown-item" href="#">Husky B</a></li><li><a class="dropdown-item" href="#">Husky C</a></li><li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">宠物用品</a><ul class="下拉菜单"><li><a class="dropdown-item" href="#">Cat</a></li><li><a class="dropdown-item" href="#">Dogs</a></li><li><a class="dropdown-item" href="#">Reptile</a></li><li><a class="dropdown-item" href="#">两栖动物</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">宠物笼</a><ul class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><li><a class="dropdown-item" href="#">Cat</a></li><li><a class="dropdown-item" href="#">Dogs</a></li><li><a class="dropdown-item" href="#">Reptile</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">宠物指南</a><ul class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><li><a class="dropdown-item" href="#">拉布拉多犬</a></li><li><a class="dropdown-item" href="#">Cat</a></li><li><a class="dropdown-item" href="#">蜥蜴</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">ML &人工智能</a><ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink"><li><a class="dropdown-item" href="#">宠物 CBD</a></li><!-- <form class="d-flex">--><input class="form-control me-2" type="search" placeholder="Search" aria-label="Search"><!-- <button class="btn btn-outline-success" type="submit">搜索</button>--><!-- </form>-->

</nav>

解决方案

对于 MAIN PROPEM OF PERSISTANT OPPENED DROPWON ，您可以通过聆听 nav-link event show.bs.dropdown 然后从 .dropdown-submenu

包裹的 .dropdown 中移除 show 类

如下:

$('.nav-link').on('show.bs.dropdown', function(e) {$(".dropdown-submenu.dropdown-menu").removeClass("show");});

请参阅下面的工作片段:(也可以在全屏模式下尝试)

为了测试，我从片段中移除了一些菜单:

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {如果 (!$(this).next().hasClass('show')) {$(this).parents('.dropdown-menu').first().find('.show').removeClass('show');}var $subMenu = $(this).next('.dropdown-menu');$subMenu.toggleClass('show');返回假；});$('.nav-link').on('show.bs.dropdown', function(e) {$(".dropdown-submenu.dropdown-menu").removeClass("show");});$(document).on("click", ".nav-link", function(e){console.log("点击导航");})$('.dropdown').click(function(event) {console.log("点击");event.stopPropagation();});

.dropdown-submenu {位置:相对；}.dropdown-submenu a::after {变换:旋转(-90度)；位置:绝对；右:6px；顶部:.8em；}.dropdown-submenu .dropdown-menu {顶部:0；左:100%；左边距:.1rem；右边距:.1rem；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script><link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/><nav class="navbar navbar-expand-md navbar-dark bg-primary py-1"><div class="container-fluid"><div class="flex-row d-flex"><a class="navbar-brand" href="#">Brand</a>

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="切换导航"><span class="navbar-toggler-icon"></span><div class="navbar-collapse collapse" id="navbarSupportedContent"><ul class="navbar-nav"><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">小狗</a><ul class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><li><a class="dropdown-item" href="#">Bulldog</a></li><li><a class="dropdown-item" href="#">Al</a></li><li><a class="dropdown-item" href="#">拉布拉多犬</a></li><li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Puppies</a><ul class="下拉菜单"><li><a class="dropdown-item" href="#">Husky</a></li><li><a class="dropdown-item" href="#">Husky B</a></li><li><a class="dropdown-item" href="#">Husky C</a></li><li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">宠物用品</a><ul class="下拉菜单"><li><a class="dropdown-item" href="#">Cat</a></li><li><a class="dropdown-item" href="#">Dogs</a></li><li><a class="dropdown-item" href="#">Reptile</a></li><li><a class="dropdown-item" href="#">两栖动物</a></li><li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">宠物笼</a><ul class="下拉菜单" aria-labelledby="navbarDropdownMenuLink"><li><a class="dropdown-item" href="#">Cat</a></li><li><a class="dropdown-item" href="#">Dogs</a></li><li><a class="dropdown-item" href="#">Reptile</a></li><!-- <button class="btn btn-outline-success" type="submit">搜索</button>--><!-- </form>-->

</nav>

I was building, multi-level(only second level) dropdown with Bootstrap Navigation Bar. I could find One guide to build Multi-level dropdown.

JSFiddle link

However, the drop-down is not closing on click. The dropdown can be closed by clicking in the Document, I have added below jquery.

$(document).click(function(){
    $('.dropdown-menu').removeClass('show');
});

The drop-down closes, but, when clicked in other nav-item the opened dropdown does not closes. So, basic JQuery is missing by me. Basically show class is not removing from .dropdown-menu class when clicked in other nav-item. So, I want to remove the show class from .dropdown-menu

Edit : I am looking for working JS or Jquery code, the above Jquery is broken code copied from the staoverflow. So, looking for complete and clean solution

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
    if (!$(this).next().hasClass('show')) {
      $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
    }
    var $subMenu = $(this).next('.dropdown-menu');
    $subMenu.toggleClass('show');
  
    return false;
  });

$(document).click(function() {
    //   $('.dropdown-menu').toggleClass('show');
$('.dropdown-menu').removeClass('show');
});

$('.dropdown').click(function(event){
  event.stopPropagation();
});

.dropdown-submenu {
    position: relative;
  }
  
  .dropdown-submenu a::after {
    transform: rotate(-90deg);
    position: absolute;
    right: 6px;
    top: .8em;
  }
  
  .dropdown-submenu .dropdown-menu {
    top: 0;
    left: 100%;
    margin-left: .1rem;
    margin-right: .1rem;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-md navbar-dark bg-primary py-1">
        <div class="container-fluid">
        <div class="flex-row d-flex">         
            <a class="navbar-brand" href="#">Brand</a>
        </div>    
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button> 
<div class="navbar-collapse collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dogs
                  </a>
                  <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                    <li><a class="dropdown-item" href="#">Bulldog</a></li>
                    <li><a class="dropdown-item" href="#">Al</a></li>
                    <li><a class="dropdown-item" href="#">Labrador</a></li>
                    <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Puppies</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Husky</a></li>
                            <li><a class="dropdown-item" href="#">Husky B</a></li>
                            <li><a class="dropdown-item" href="#">Husky C</a></li>
                          </ul>
                    </li>
                    <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Pet Products</a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Cat</a></li>
                            <li><a class="dropdown-item" href="#">Dogs</a></li>
                            <li><a class="dropdown-item" href="#">Reptile</a></li>
                            <li><a class="dropdown-item" href="#">Amphibian</a></li>
                          </ul>
                    </li>
                  </ul>
                </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Pet Cages
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">Cat</a></li>
                      <li><a class="dropdown-item" href="#">Dogs</a></li>
                      <li><a class="dropdown-item" href="#">Reptile</a></li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Pet Guides
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">Labrador</a></li>
                      <li><a class="dropdown-item" href="#">Cat</a></li>
                      <li><a class="dropdown-item" href="#">Lizard</a></li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      ML & AI
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                      <li><a class="dropdown-item" href="#">Pet CBD</a></li>                      
                    </ul>
                  </li>
                <!-- <form class="d-flex"> -->
                    <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                    <!-- <button class="btn btn-outline-success" type="submit">Search</button> -->
                  <!-- </form> -->
              </ul>
        </div>
        </div>
        </nav>

解决方案

for the MAIN PROBLEM OF PERSISTANT OPPENED DROPWON , you can fix that problem by listening the nav-link event show.bs.dropdown and then remove the show class from the .dropdown wrapped by .dropdown-submenu

as folow :

$('.nav-link').on('show.bs.dropdown', function(e) {
  $(".dropdown-submenu .dropdown-menu").removeClass("show");
});

See below working snippet : ( try it also in fullscreen )

For the sake of testing , I've rmoved some menu from snippet :

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');

  return false;
});


$('.nav-link').on('show.bs.dropdown', function(e) {
  $(".dropdown-submenu .dropdown-menu").removeClass("show");
});

$(document).on("click", ".nav-link", function(e){
  console.log("clicl nav");
})

$('.dropdown').click(function(event) {
  console.log("click");
  event.stopPropagation();
});

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu a::after {
  transform: rotate(-90deg);
  position: absolute;
  right: 6px;
  top: .8em;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-left: .1rem;
  margin-right: .1rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-expand-md navbar-dark bg-primary py-1">
  <div class="container-fluid">
    <div class="flex-row d-flex">
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
    <div class="navbar-collapse collapse" id="navbarSupportedContent">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Dogs
                  </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Bulldog</a></li>
            <li><a class="dropdown-item" href="#">Al</a></li>
            <li><a class="dropdown-item" href="#">Labrador</a></li>
            <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Puppies</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Husky</a></li>
                <li><a class="dropdown-item" href="#">Husky B</a></li>
                <li><a class="dropdown-item" href="#">Husky C</a></li>
              </ul>
            </li>
            <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Pet Products</a>
              <ul class="dropdown-menu">
                <li><a class="dropdown-item" href="#">Cat</a></li>
                <li><a class="dropdown-item" href="#">Dogs</a></li>
                <li><a class="dropdown-item" href="#">Reptile</a></li>
                <li><a class="dropdown-item" href="#">Amphibian</a></li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                      Pet Cages
                    </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Cat</a></li>
            <li><a class="dropdown-item" href="#">Dogs</a></li>
            <li><a class="dropdown-item" href="#">Reptile</a></li>
          </ul>
        </li>
        <!-- <button class="btn btn-outline-success" type="submit">Search</button> -->
        <!-- </form> -->
      </ul>
    </div>
  </div>
</nav>

这篇关于Jquery 没有关闭下拉菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆