Question

我正在尝试为列表中的第三项添加一个子菜单，该子菜单位于导航栏中的下拉菜单中，我尝试使用内置于引导程序的类，但未成功。这是在我的导航栏中

 <li id="navTimesheet" class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Navbar Item Title<span class="caret"></span></a>
      <ul class="dropdown-menu" >           
           <li><a href="path">item1</a></li>
           <li><a href="other path">item2</a></li>
           <li><a href="third path">item3</a></li>                                              
      </ul>
 </li>

编辑：

<li id="navTimesheet" class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Navbar Item Title<span class="caret"></span></a>
      <ul class="dropdown-menu" >           
           <li><a href="path">item1</a></li>
           <li><a href="other path">item2</a></li>
           <li><a href="third path">item3</a></li>       

        <!-- from w3schools-->
           <li class="dropdown-submenu">
                <a class="test" tabindex="-1" href="#">New dropdown <span class="caret"></span></a>
                <ul class="dropdown-menu">
                    <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
                </ul>
           </li>

      </ul>
</li>

此链接可以更好地显示我想做的但没能做的。 https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_dropdown_multilevel_css&stacked=h

Answer 1

检查以下代码段。按照您给定的链接，您需要更改一些html代码，并且必须添加脚本来切换下拉菜单。

您也可以使用CSS实现此目的。参见https://codepen.io/Magisters/pen/MwbeWv

$('.dropdown-submenu a.test').on("click", function(e){
    $(this).next('ul').toggle();
    e.stopPropagation();
    e.preventDefault();
  });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<li id="navTimesheet" class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Navbar Item Title<span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li><a href="path">item1</a></li>
        <li><a href="other path">item2</a></li>
        <li class="dropdown-submenu">
            <a href="third path" class="test">item3<span class="caret"></span></a>
            <ul class="dropdown-menu">
                <li><a tabindex="-1" href="#">2nd level dropdown</a></li>
            </ul>
        </li>
    </ul>
</li>

子菜单在Bootstrap中下拉不起作用

1 个答案: