在bootstrap中创建三级内联ul

brqmpdu1  于 2022-12-16  发布在  Bootstrap
关注(0)|答案(1)|浏览(151)

我正在使用以下HTML创建一个三级内联列表。第一级默认显示在页面加载。当我单击第一级菜单,即“课程”时,它会展开并显示第二级菜单。但当我单击第二级菜单,即“计算机课程”或“民事课程”时,它们不会展开以显示第三级菜单。
提前感谢您的帮助。

<ul class="nav navbar-nav">          
    <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria- 
           haspopup="true" aria-expanded="false">Courses <span class="caret"></span></a>
        <ul class="dropdown-menu">
           <li class="dropdown-submenu">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria- 
              haspopup="true" aria-expanded="false" >Computer Courses<span class="caret"></span> 
              </a>
                 <ul class="dropdown-menu">
                     <li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu- 
                       right"></i>IT Advance</a>
                     </li>
                     <li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu- 
                      right"></i>Web Designing</a>
                     </li>
                 </ul>
           </li>
           <li class="dropdown-submenu">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria- 
              haspopup="true" aria-expanded="false">Civil Courses<span class="caret"></span></a>
              <ul class="dropdown-menu">
                 <li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu- 
                   right"></i>Civil Survey</a>
                 </li>
                 <li class="dropdown-submenu"><a href="#"><i class=" glyphicon glyphicon-menu- 
                   right"></i>Quantity Survey</a>
                 </li>
              </ul>
          </li> 
     </ul>
   </li>
</ul>
55ooxyrt

55ooxyrt1#

我不知道twitter-bootstrap是如何工作的,但是我可以想象多个<a>标签加上href="#" s会把它搞得一团糟,而且你的html是无效的(你可以把<ul>作为另一个<ul>的子项),也许把<ul> Package 在<a>中也不是好的做法。
使用javascript onclick函数实现扩展行为,或者更深入地研究twitter-bootstrap,以防它们确实支持类似的功能。
请查阅https://validator.w3.org/nu/#textarea,查看哪些html是有效的。

相关问题