多级下拉引导

Posted

技术标签:

【中文标题】多级下拉引导【英文标题】：Multi Level Drop Down Bootstrap 【发布时间】：2018-06-04 20:18:00 【问题描述】：

我已经尝试过这个Multi-Level Drop Down。当我有 2 个或更多下拉子菜单时。当我单击第一个下拉菜单然后单击另一个下拉菜单时，第一个下拉菜单仍然打开。我希望当我点击第二个下拉菜单时，第一个下拉菜单会关闭，或者当我点击下拉菜单的头部时，所有子下拉菜单都会关闭。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu 
    position: relative;


.dropdown-submenu .dropdown-menu 
    top: 0;
    left: 100%;
    margin-top: -1px;

</style>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown 2 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function()
  $('.dropdown-submenu a.test').on("click", function(e)
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  );
);
</script>

</body>
</html>

【问题讨论】：

向我们展示一些东西，例如脚本、html 运行代码sn-p @Se0ng11 你应该使用：geedmo.github.io/yamm 试试这样的东西...jsfiddle.net/chintansoni/oye7bq5q 请脚本回答 【参考方案1】：

您可以使用 CSS、jQuery addClass('active') 和 toggleClass('active') 在 CSS 中执行此操作，您必须为所有 dropmenu 设置 display: none;

给你

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

$(function () 
$('#drop1').on('click', function()
		$('.dropmenu1').toggleClass('active');
    $('.dropmenu2').removeClass('active');
);

$('#drop2').on('click', function()
		$('.dropmenu1').removeClass('active');
	$('.dropmenu2').toggleClass('active');
);

$('#drop3').on('click', function()
		$('.dropmenu3').toggleClass('active');
);

$('#drop4').on('click', function()
		$('.dropmenu4').toggleClass('active');
);
$('#button-t').on('click', function()
		$('.dropmenu1').removeClass('active');
		$('.dropmenu2').removeClass('active');
		$('.dropmenu3').removeClass('active');
		$('.dropmenu4').removeClass('active');
);
);
.dropdown-submenu 
    position: relative;


.dropdown-submenu .dropdown-menu 
    top: 0;
    left: 100%;
    margin-top: -1px;

ul.dropdown-menu ul.dropdown-menu
  display:none !important;

ul.dropdown-menu ul.dropdown-menu.active
  display:block !important;

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

<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" id="button-t">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#" id="drop1"> New dropdown 1 <span class="caret"></span></a>
        <ul class="dropdown-menu dropmenu1">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#" id="drop3">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu dropmenu3">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="dropdown-submenu" >
        <a class="test" tabindex="-1" href="#" id="drop2">New dropdown 2 <span class="caret"></span></a>
        <ul class="dropdown-menu dropmenu2">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#" id="drop4">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu dropmenu4">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

【讨论】：

【参考方案2】：

您可以将点击处理程序更改为更通用一点。这将关闭您单击的同一级别的任何“ul”接受。

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.dropdown-submenu 
    position: relative;


.dropdown-submenu .dropdown-menu 
    top: 0;
    left: 100%;
    margin-top: -1px;

</style>
</head>
<body>
   
<div class="container">
  <h2>Multi-Level Dropdowns</h2>
  <p>In this example, we have created a .dropdown-submenu class for multi-level dropdowns (see style section above).</p>
  <p>Note that we have added jQuery to open the multi-level dropdown on click (see script section below).</p>                                        
  <div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials
    <span class="caret"></span></button>
    <ul class="dropdown-menu">
      <li><a tabindex="-1" href="#">HTML</a></li>
      <li><a tabindex="-1" href="#">CSS</a></li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="dropdown-submenu">
        <a class="test" tabindex="-1" href="#">New dropdown 2 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
          <li class="dropdown-submenu">
            <a class="test" href="#">Another dropdown <span class="caret"></span></a>
            <ul class="dropdown-menu">
              <li><a href="#">3rd level dropdown</a></li>
              <li><a href="#">3rd level dropdown</a></li>
            </ul>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<script>
$(document).ready(function()
    $('.dropdown-submenu a.test').on("click", function(e)
        let jSubMenu = $(this).next('ul');
        jSubMenu.toggle();
        if (jSubMenu.length > 0) 
            // Close any other 'ul' elements at the same level.
            let jOtherSubMenus = $(this).parent().parent().find('ul');
            jOtherSubMenus.each(function(index, el) 
              let jEl = $(el);
              if (el != jSubMenu[0] && jEl.css('display') == 'block') 
                jEl.toggle();
              
            );
        
        e.stopPropagation();
        e.preventDefault();
    );
);
</script>

</body>
</html>

【讨论】：

以上是关于多级下拉引导的主要内容，如果未能解决你的问题，请参考以下文章

如何使下拉菜单的高度与引导程序4中子菜单的高度相同

使用 Jquery 的多级下拉菜单

AngularJs 如何实现多级联动且最后一级下拉可以选择多个选项。请附上正确例子

使用嵌套的对象数组创建多级下拉列表

Reactstrap 多级下拉祖先不关闭

Flutter：如何根据选择的第一个下拉按钮值设置第二个下拉按钮（多级相关按钮）的值？