时间戳

首页 > 解决方案 > 如何在下拉菜单上使用引导程序创建下拉菜单

html - 如何在下拉菜单上使用引导程序创建下拉菜单

问题描述

我在网站的导航栏上放了一个下拉链接。我希望下拉项目之一是不同的下拉链接。事实上，在站点 NavBar 的另一个下拉菜单中寻找形成一个下拉菜单。你怎么能胜任这份工作？我使用了以下代码，但没有形成第二个下拉菜单。问题是什么？

<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
 <ul class="navbar-nav">
<li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
                    Dropdown link
                </a>
                <div class="dropdown-menu">
                    <span class="dropdown-header" href="#">header</span>
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                    <span class="dropdown-header">header</span>
                    <div class="dropdown dropright">
                        <button class="btn btn-light dropdown-toggle" data-toggle="dropdown">
                            Dropright button
                        </button>
                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="#">Link 1</a>
                            <a class="dropdown-item" href="#">Link 2</a>
                            <a class="dropdown-item" href="#">Link 3</a>
                        </div>
                    </div>

                </div>

            </li>
</ul>
</nav>

标签： htmlcssbootstrap-4

解决方案

这可能会给你一些关于如何实现它的想法。

问题之一是 dropright 链接的行为与主下拉菜单的任何其他链接一样。这就是为什么单击它后它会隐藏的原因。您必须使用 jQuery 单独管理它，以防止主下拉菜单关闭。

$(document).ready(function() {
  $('.dropright button').on("click", function(e) {
    e.stopPropagation();
    e.preventDefault();

    if (!$(this).next('div').hasClass('show')) {
      $(this).next('div').addClass('show');
    } else {
      $(this).next('div').removeClass('show');
    }

  });
});
.dropright {
  position: relative;
}

.dropright .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">Dropdown link</a>
      <div class="dropdown-menu">
        <span class="dropdown-header" href="#">header</span>
        <a class="dropdown-item" href="#">Link 1</a>
        <a class="dropdown-item" href="#">Link 2</a>
        <span class="dropdown-header">header</span>
        <div class="dropright">
          <button class="btn btn-light dropdown-toggle" data-toggle="dropdown">Dropright button</button>
          <div class="dropdown-menu">
            <a class="dropdown-item" href="#">Link 1</a>
            <a class="dropdown-item" href="#">Link 2</a>
            <a class="dropdown-item" href="#">Link 3</a>
          </div>
        </div>
      </div>
    </li>
  </ul>
</nav>

推荐阅读