代码之家 › 专栏 › 技术社区 › Rajkumar Somasundaram

多级引导下拉的问题

twitter-bootstrap css html jquery javascript

Rajkumar Somasundaram · 技术社区 · 7 年前

如何使子菜单向左或向右显示而不是垂直向下显示?
此外,多层次的下拉列表带来了额外的一层复杂性,即如果它只是一个下拉列表,我们可以显示和隐藏,因为我们希望。由于有多个下拉列表,代码只是随意隐藏/取消隐藏。

请提出前进的方向。

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

1 回复 | 直到 7 年前

Jerdine Sabio 7 年前

首先,我在你的下拉菜单上修改了一些css属性 我准备好了top:0; 这样下拉列表就会出现在父元素的顶部。那么这将使下拉菜单在父元素的左侧显示几个空格。

对于随后的下拉列表, 我准备好了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>