css 引导程序4：导航内的多级下拉列表

z2acfund 于 2022-11-27 发布在其他

关注(0)|答案(7)|浏览(196)

在Bootstrap 4中创建多级下拉列表最简单的方法是什么？我在SO上找到的所有示例要么太乱，要么没有包含在导航中。
我试过将下拉列表放在下拉列表中，但似乎不起作用。有人能帮我吗？
下面是我的代码的基本大纲：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
  <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link 1</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

css

来源：https://stackoverflow.com/questions/44467377/bootstrap-4-multilevel-dropdown-inside-navigation

7条答案

按热度按时间

von4xj4u1#

我使用了下面的CSS和JavaScript。它使用了一个额外的类dropdown-submenu。我用Bootstrap 4测试了它。
它支持多级子菜单。
第一个

赞(0）回复(0）举报 2022-11-27

sbtkgmzw2#

下面是基于bootstrap4的多级下拉菜单。我试过它是根据bootstrap4的基本下拉菜单。
第一个

赞(0）回复(0）举报 2022-11-27

ijxebb2r3#

2018年更新

下面是Bootstrap 4.1导航栏的另一个变体，它带有多级下拉菜单。这个导航栏的子菜单使用了最少的CSS，并且可以根据需要重新定位：

https://codeply.com/go/nG6iMAmI2X

.dropdown-submenu {
  position: relative;
}

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

控制子菜单显示的jQuery：

$('.dropdown-submenu > a').on("click", function(e) {
    var submenu = $(this);
    $('.dropdown-submenu .dropdown-menu').removeClass('show');
    submenu.next('.dropdown-menu').addClass('show');
    e.stopPropagation();
});

$('.dropdown').on("hidden.bs.dropdown", function() {
    // hide any open menus when parent closes
    $('.dropdown-menu.show').removeClass('show');
});

请参阅此答案以激活Bootstrap 4 submenus on hover

赞(0）回复(0）举报 2022-11-27

hfwmuf9z4#

我发现这个multidrop-down menu在所有设备上都很好用。
此外，hover style
它支持带有bootstrap 4的多级子菜单。
第一个

赞(0）回复(0）举报 2022-11-27

svujldwt5#

使用官方HTML而不添加额外的CSS样式和类，就像原生支持一样。
只需添加以下代码：

$.fn.dropdown = (function() {
    var $bsDropdown = $.fn.dropdown;
    return function(config) {
        if (typeof config === 'string' && config === 'toggle') { // dropdown toggle trigged
            $('.has-child-dropdown-show').removeClass('has-child-dropdown-show');
            $(this).closest('.dropdown').parents('.dropdown').addClass('has-child-dropdown-show');
        }
        var ret = $bsDropdown.call($(this), config);
        $(this).off('click.bs.dropdown'); // Turn off dropdown.js click event, it will call 'this.toggle()' internal
        return ret;
    }
})();

$(function() {
    $('.dropdown [data-toggle="dropdown"]').on('click', function(e) {
        $(this).dropdown('toggle');
        e.stopPropagation();
    });
    $('.dropdown').on('hide.bs.dropdown', function(e) {
        if ($(this).is('.has-child-dropdown-show')) {
            $(this).removeClass('has-child-dropdown-show');
            e.preventDefault();
        }
        e.stopPropagation();
    });
});

下拉式的引导程序可以很容易地改变到无限级.可惜他们没有做到.
顺便说一句，悬停版本：https://github.com/dallaslu/bootstrap-4-multi-level-dropdown
下面是一个完美的演示：https://jsfiddle.net/dallaslu/adky6jvs/（与Bootstrap v4.4.1配合使用效果良好）

赞(0）回复(0）举报 2022-11-27

z9ju0rcb6#

此方法适用于Bootstrap 4.3.1。
Jsfiddle：https://jsfiddle.net/ko6L31w4/1/的名称
HTML代码可能有点混乱，因为我创建了一个稍微复杂的下拉菜单进行全面测试，否则一切都是非常简单的。
Js包含较少的折叠打开的下拉菜单的方法，CSS只包含最少的样式来实现全部功能。
第一个

赞(0）回复(0）举报 2022-11-27

kulphzqa7#

有一个更简单的方法可以做到这一点。我正在使用bootstrap 5，但我认为它也适用于bootstrap 4。你必须使用“btn-group”类而不是“nav-item”类。而且你不必在jquery中编写任何代码或创建类！。检查这个片段。

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<body>
<nav class="navbar navbar-expand-xl navbar-dark bg-primary bg-gradient">
    <div class="container-fluid">
        <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
        >
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                

                
        <li class="btn-group">
          <div class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            Clickable inside
          </div>
          <ul class="dropdown-menu">
            <li>
              <div class="btn-group dropend">
                <button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                  Clickable inside
                </button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                </ul>
              </div>
            </li>
            <li><a class="dropdown-item" href="#">Menu item</a></li>
            <li><a class="dropdown-item" href="#">Menu item</a></li>
          </ul>
        </li>
        <li class="btn-group">
          <div class="nav-link dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
            Clickable inside
          </div>
          <ul class="dropdown-menu">
            <li>
              <div class="btn-group dropend">
                <button class="dropdown-item dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                  Clickable inside
                </button>
                <ul class="dropdown-menu">
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                  <li><a class="dropdown-item" href="#">Menu item</a></li>
                </ul>
              </div>
            </li>
            <li><a class="dropdown-item" href="#">Menu item</a></li>
            <li><a class="dropdown-item" href="#">Menu item</a></li>
          </ul>
        </li>
            </ul>
        </div>
    </div>
</nav>

</body>

赞(0）回复(0）举报 2022-11-27

我来回答

css 引导程序4：导航内的多级下拉列表

7条答案

相关问题

热门标签

最新问答