Question

实际上，我正在尝试在一些 subdropdown 菜单中构建一个下拉菜单菜单。

问题是，当我打开它并触发子下拉菜单时，我只是关闭主下拉菜单，子下拉菜单仍会打开，或者如果我单击子菜单项之一甚至关闭它也会发生。

实际上，我使用以下代码来管理onClick：

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


    $(this).parents('div.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) {
        $('.dropdown-submenu .show').removeClass("show");
    });


    return false;
});

结果如下

Answer 1

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


    $(this).parents('div.nav-item.dropdown.show').on('hidden.bs.dropdown', function (e) {
        $('.dropdown-submenu .show').removeClass("show");
    });

    return false;
});

$('.dropdown-submenu ul a').on('click', function (e) {
		var parentClass = $(this).parents()[1].className.includes('show');
    if	(parentClass) {
    	$('.dropdown-submenu .show').removeClass("show");
    }
});

.dropdown-menu > li:last-child > a {
    border-radius: 0;
}

.dropdown-menu > li:first-child > a {
    border-radius: 0;
}

.dropdown-menu {
    border-radius: 0;
}


.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}

.dropdown-submenu {
    position: relative;
}

    .dropdown-submenu > .dropdown-menu {
        top: 0;
        left: 100%;
        margin-top: -6px;
    }

/* rotate caret on hover */
.dropdown-menu > li > a:hover:after {
    text-decoration: underline;
    transform: rotate(-90deg);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="col-auto">
  <a class="nav-link dropdown-toggle" role="button" id="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Ordinamento</a>
  <ul class="dropdown-menu" aria-labelledby="dropdown">
      <li><small class="text-muted ml-2">Data</small></li>
      <li><a class="dropdown-item ord" data-order="ORDER BY LASTDATA DESC" role="button">Recente</a></li>
      <li><a class="dropdown-item ord" data-order="ORDER BY LASTDATA ASC" role="button">Obsolete</a></li>
      <li><small class="text-muted ml-2">Versione</small></li>
      <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Recente</a>
          <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">X</a></li>
              <li><a class="dropdown-item" href="#">XX</a></li>
              <li><a class="dropdown-item" href="#">XXX</a></li>
              <li><a class="dropdown-item" href="#">XXXX</a></li>
          </ul>
      </li>

      <li class="dropdown-submenu"><a class="dropdown-item dropdown-toggle" href="#">Obsoleta</a>
          <ul class="dropdown-menu">
              <li><a class="dropdown-item" href="#">X</a></li>
              <li><a class="dropdown-item" href="#">XX</a></li>
              <li><a class="dropdown-item" href="#">XXX</a></li>
              <li><a class="dropdown-item" href="#">XXXX</a></li>
          </ul>
      </li>
  </ul>
</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

这是您更新的小提琴

https://jsfiddle.net/60hftL27/

Bootstrap下拉菜单不会关闭它在所选项目上的子菜单

1 个答案: