javascript - 多级 Bootstrap 下拉列表的问题

Question

正如您在我的代码片段中所见；下拉列表垂直向下显示。这是我的查询。

1. 如何让子菜单向左或向右显示，而不是垂直向下显示？

2. 到目前为止，仅当我再次单击插入符号时，此菜单才会消失。从用户体验的 Angular 来看，这可能很烦人。所以我添加了三个注释行，当在文档中的任何地方单击时，它们会使下拉菜单消失；但在随后的点击中，下拉菜单将不起作用。我知道为什么它不起作用，但我找不到解决方法。

3. 此外，多级下拉菜单带来了一层额外的复杂性，即如果它只是一个下拉菜单，我们可以根据需要显示和隐藏。由于有多个下拉菜单，代码只是随意隐藏/取消隐藏。

请提出前进的方向。

PS:请提供 bootstrap 3 而不是 4 的解决方案。

$('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });
  
  //document.addEventListener("click", function () {
    //    $('.dropdown-menu:visible').addClass('hide');
   // });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<nav class="navbar navbar-default">
	<ul class="nav navbar-nav">
		<li class="dropdown-submenu">
			<a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a>
			<ul class="dropdown-menu multi-level">
				<li><a tabindex="-1" href="/#">Laughing</a></li>
				<li><a tabindex="-1" href="/#">Out</a></li>
				<li><a tabindex="-1" href="/#">Loud</a></li>
				<li class="divider"></li>
				<li class="dropdown-submenu">
				<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a tabindex="-1" href="/#">Just</a></li>
					<li><a tabindex="-1" href="/#/1">Another</a></li>
					<li><a tabindex="-1" href="/#/1">Sub</a></li>
					<li><a tabindex="-1" href="/#/1">Menu</a></li>
				</ul>
			</ul>
		</li>
	</ul>
	<ul class="nav navbar-nav">
		<li class="dropdown-submenu">
			<a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a>
			<ul class="dropdown-menu multi-level">
				<li><a tabindex="-1" href="/#">Laughing</a></li>
				<li><a tabindex="-1" href="/#">Out</a></li>
				<li><a tabindex="-1" href="/#">Loud</a></li>
				<li class="divider"></li>
				<li class="dropdown-submenu">
				<a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
				<ul class="dropdown-menu">
					<li><a tabindex="-1" href="/#">Just</a></li>
					<li><a tabindex="-1" href="/#/1">Another</a></li>
					<li><a tabindex="-1" href="/#/1">Sub</a></li>
					<li><a tabindex="-1" href="/#/1">Menu</a></li>
				</ul>
			</ul>
		</li>
	</ul>
</nav>

Answer 1

我修改了下拉菜单中的几个 css 属性，首先我设置了 top:0;，这样下拉菜单就会出现在父元素的顶部。然后 我设置 left:25%; 这将使下拉菜单出现在父元素左侧的几个空格处​​。

对于后续的下拉列表，我设置了 left:100%; 以便它们显示在父下拉列表的右侧。

与其在每次要关闭它时都添加“隐藏”类，不如修改它的 css；

$('.dropdown-menu:visible').css('display','none');

我还添加了一个代码，如果点击的元素不在多级下拉列表中，它会隐藏所有其他子菜单。

运行代码段；

$('.dropdown-submenu a.test').on("click", function(e) {
  $(this).next('ul').toggle();

  // the parent dropdown-submenu which is a li tag
  var clickedDropdown = $(this).parent();

  // the parent of the li tag which is a ul tag
  var parentDropdown = $(this).parent().parent();

  if (!parentDropdown.hasClass("multi-level")) {

    // if the clicked element has a parent dropdown, hide all other submenus
    $(".dropdown-menu").each(function() {
      if ($(this).parent()[0] != clickedDropdown[0]) {
        $(this).css("display", "none");
      }
    });
  }

  e.stopPropagation();
  e.preventDefault();
});

document.addEventListener("click", function() {
  $('.dropdown-menu:visible').css('display', 'none');
});

.dropdown-menu {
  left: 25% !important;
  top: 0 !important;
}

.dropdown-menu .dropdown-menu {
  left: 100% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<nav class="navbar navbar-default">
  <ul class="nav navbar-nav">
    <li class="dropdown-submenu">
      <a class="test" tabindex="-1" href="#">Dropdown 1 <span class="caret"></span></a>
      <ul class="dropdown-menu multi-level">
        <li><a tabindex="-1" href="/#">Laughing</a></li>
        <li><a tabindex="-1" href="/#">Out</a></li>
        <li><a tabindex="-1" href="/#">Loud</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="/#">Just</a></li>
            <li><a tabindex="-1" href="/#/1">Another</a></li>
            <li><a tabindex="-1" href="/#/1">Sub</a></li>
            <li><a tabindex="-1" href="/#/1">Menu</a></li>
          </ul>
      </ul>
      </li>
  </ul>
  <ul class="nav navbar-nav">
    <li class="dropdown-submenu">
      <a class="test" tabindex="-1" href="#">Dropdown 2 <span class="caret"></span></a>
      <ul class="dropdown-menu multi-level">
        <li><a tabindex="-1" href="/#">Laughing</a></li>
        <li><a tabindex="-1" href="/#">Out</a></li>
        <li><a tabindex="-1" href="/#">Loud</a></li>
        <li class="divider"></li>
        <li class="dropdown-submenu">
          <a class="test" tabindex="-1" href="#">*********<span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a tabindex="-1" href="/#">Just</a></li>
            <li><a tabindex="-1" href="/#/1">Another</a></li>
            <li><a tabindex="-1" href="/#/1">Sub</a></li>
            <li><a tabindex="-1" href="/#/1">Menu</a></li>
          </ul>
      </ul>
      </li>
  </ul>
</nav>