Question

我的导航栏有问题。.我想在下拉部分“ 3”下进行设置，我想设置几个菜单点。作为前言链接4
不幸的是，我无法在代码中处理此问题...引导程序是否可能无法处理此问题？

您能举个例子，我如何解决附加了我的代码的问题。

example

Answer 1

<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<style>
  @media (min-width: 992px){
    .dropdown-menu .dropdown-toggle:after{
        border-top: .3em solid transparent;
        border-right: 0;
        border-bottom: .3em solid transparent;
        border-left: .3em solid;
    }
    .dropdown-menu .dropdown-menu{
        margin-left:0; margin-right: 0;
    }
    .dropdown-menu li{
        position: relative;
    }
    .nav-item .submenu{ 
        display: none;
        position: absolute;
        left:100%; top:-7px;
    }
    .nav-item .submenu-left{ 
        right:100%; left:auto;
    }
    .dropdown-menu > li:hover{ background-color: #f1f1f1 }
    .dropdown-menu > li:hover > .submenu{
        display: block;
    }
}
</style>
</head>

<body>
  <h1>Pills With DropDown</h1>
  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main_nav">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="main_nav">
    
    <ul class="navbar-nav">
    <li class="nav-item"> <a class="nav-link" href="#"> Active </a> </li>
    <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown"> DropDown  </a>
        <ul class="dropdown-menu">
        <li><a class="dropdown-item dropdown-toggle" href="#"> Second level 2</a>
         <ul class="submenu dropdown-menu">
            <li><a class="dropdown-item" href=""> Third level 1</a></li>
            <li><a class="dropdown-item" href=""> Third level 2</a></li>
            <li><a class="dropdown-item dropdown-toggle" href=""> Third level 3</a>
          <ul class="submenu dropdown-menu">
              <li><a class="dropdown-item" href=""> Fourth level 1</a></li>
              <li><a class="dropdown-item" href=""> Fourth level 2</a></li>
          </ul>
            </li>
         </ul>
        </li>
        <li><a class="dropdown-item" href="#"> Dropdown item 3 </a></li>
        <li><a class="dropdown-item" href="#"> Dropdown item 4 </a>
        </ul>
    </li>
    <li class="nav-item"> <a class="nav-link" href="#"> First level 1 </a> </li>
    <li class="nav-item"> <a class="nav-link" href="#"> First level 2 </a></li>
    </ul>
    
    </div> <!-- navbar-collapse.// -->
    </nav>
</body>
<script>
  // Prevent closing from click inside dropdown
$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation();
});

// make it as accordion for smaller screens
if ($(window).width() < 992) {
  $('.dropdown-menu a').click(function(e){
    e.preventDefault();
      if($(this).next('.submenu').length){
        $(this).next('.submenu').toggle();
      }
      $('.dropdown').on('hide.bs.dropdown', function () {
     $(this).find('.submenu').hide();
  })
  });
}
</script>
</html>

导航栏标题出现问题，如何解决？

1 个答案: