在引导程序中创建一个三级内联ul

Question

我正在使用以下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>

Answer 1

我不确定twitter引导程序到底是如何工作的，但我可以想象有多个带有href="#"的<a>标签会把这件事搞砸。此外，您的html是无效的(您可以将<ul>作为另一个<ul>的子级(，并且可能将<ul>封装在<a>中也是不好的做法。

使用javascript onclick函数进行扩展行为，或者深入研究twitter引导程序，以防它们确实支持这样的功能。

第页。S.咨询https://validator.w3.org/nu/#textarea查看什么html是有效的。