Question

我想在顶部显示所选的下拉菜单（下拉标题）。当他们在列表中时，我可以在标题中显示所选项目。我跟着

        <li class="dropdown"><a class="dropdown-toggle toggle2" data-toggle="dropdown" href="#">Meterial Type <span class="caret"></span></a>
          <ul class="dropdown-menu menu2">
        <li><a href="#">Wood</a></li>
        <li><a href="#">Mud</a></li>
        <li><a href="#">Cloth</a></li>
        <li><a href="#">Thread</a></li>
        <li><a href="#">Jute</a></li>
        <li><a href="#">Cotton</a></li>
        <li><a href="#">Cane</a></li>
        <li><a href="#">Bamboo</a></li>
          </ul>
        </li>
        <li>

             <script>

$(function(){

    $(".menu2 li a").click(function(){

      $(".toggle2").text($(this).text());

   });

});
</script>

但是，我在div的下拉菜单中尝试这个，我失败了。

        <div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
          <a class="dropdown-item" href="#">Mud</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cloth</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Thread</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Jute</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cotton</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cane</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Bamboo</a>
        </div>
      </li>


             <script>

$(function(){

    $(".menu2 li a").click(function(){

      $(".navbarDropdown2").text($(this).text());

   });

});
</script>

我使用bootstrap 4.1。我关注getbootstrap documentation

Answer 1

<li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle toggle2" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Object Type
        </a>

        <div class="dropdown-menu menu2" aria-labelledby="navbarDropdown2">
          <a class="dropdown-item" href="#">Mud</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cloth</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Thread</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Jute</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cotton</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Cane</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Bamboo</a>
        </div>
      </li>


             <script>

$(function(){

    $(".menu2 li a").click(function(){

      $(".toggle2").text($(this).text());

   });

});
</script>

如何选择bootstrap下拉菜单？

1 个答案: