Question

我正在尝试在我的引导站点的标题中添加“多级”下拉菜单，我添加了此代码，你们可以告诉我哪里出错了，因为它不起作用，它总是打开第一个选项不管我在哪里点击。我在下拉菜单中有五个下拉菜单。

请看看这个，并告诉我我做错了什么？

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown"
  aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
  <img src="/assets/dots.png" style="height:30px; width:30px;">
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavDropdown">
  <ul class="navbar-nav">
    <li class="nav-item dropdown">
      <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
        aria-expanded="false">
        Beauty
        <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
          style="width:10px; height:10px;">
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="nav-link" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Makeup
          <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
            style="width:10px; height:10px;">
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Lips</a>
          <a class="dropdown-item" href="#">Face</a>
          <a class="dropdown-item" href="#">Nails</a>
          <a class="dropdown-item" href="#">Kits</a>
          <a class="dropdown-item" href="#">Tools</a>
        </div>
        <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Skin
          <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
            style="width:10px; height:10px;">
        </a>


        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Facewash</a>
          <a class="dropdown-item" href="#">Toner</a>
          <a class="dropdown-item" href="#">Cleaner</a>
          <a class="dropdown-item" href="#">Sunscream</a>
          <a class="dropdown-item" href="#">Bleach</a>
          <a class="dropdown-item" href="#">Body Oil</a>
          <a class="dropdown-item" href="#">Scrubs</a>
          <a class="dropdown-item" href="#">HandWash</a>
          <a class="dropdown-item" href="#">Hair Remover</a>
        </div>
        <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Hair
          <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
            style="width:10px; height:10px;">
        </a>


        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Shampoo</a>
          <a class="dropdown-item" href="#">Conditioner</a>
          <a class="dropdown-item" href="#">Serum</a>
          <a class="dropdown-item" href="#">Gels</a>
          <a class="dropdown-item" href="#">Sprey</a>
          <a class="dropdown-item" href="#">Colour</a>
          <a class="dropdown-item" href="#">Brushes</a>
          <a class="dropdown-item" href="#">Dryer</a>
          <a class="dropdown-item" href="#">Straightner Roller</a>
        </div>

        <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Shaving
          <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
            style="width:10px; height:10px;">
        </a>


        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Razors</a>
          <a class="dropdown-item" href="#">Shavers</a>
          <a class="dropdown-item" href="#">Cream</a>
          <a class="dropdown-item" href="#">Brushes</a>
          <a class="dropdown-item" href="#">Pre & Post</a>
          <a class="dropdown-item" href="#">Moustach Care</a>
          <a class="dropdown-item" href="#">Men's Creame</a>
        </div>

        <a class="nav-link" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true"
          aria-expanded="false">
          Fragnence
          <img src="http://pluspng.com/img-png/free-png-plus-sign-plus-sign-icon-button-green-approved-check-712.png"
            style="width:10px; height:10px;">
        </a>


        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">

          <a class="dropdown-item" href="#">Deodrents</a>
          <a class="dropdown-item" href="#">Body Mist</a>
          <a class="dropdown-item" href="#">Perfume</a>
        </div>

      </div>
    </li>
  </ul>
</div>

Answer 1

Bootstrap多级下拉菜单是一个可切换的菜单，允许用户从预定义的列表中选择一个值：

使用引导程序的多级下拉菜单

1 个答案: