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