Question

您可以在我的代码段中看到；下拉列表垂直向下显示。这是我的查询。

如何使子菜单向左或向右而不是垂直向下显示？
到目前为止，仅当我再次单击插入符号时，此菜单才会消失。从UX角度来看，这可能很烦人。因此，我添加了三行注释行，当单击记录中的任何位置时，它将使下拉列表消失。但是，在随后的点击中，下拉菜单将不起作用。我知道为什么它行不通，但我找不到解决方法。
多级下拉菜单还带来了一层额外的复杂性，即如果只是一个下拉菜单，我们可以根据需要显示和隐藏。由于存在多个下拉列表，因此代码只是随意地隐藏/取消隐藏。

请提出前进的方向。

PS：请提供一个引导程序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％; 设置为使其显示在父下拉菜单的右侧。

与其在每次要关闭类时都添加“ hide”类，不如修改其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>

多级引导程序下拉菜单出现问题

1 个答案: