如何解决如何在Boostrap 4中创建多级下拉列表
我想用Bootstrap 4创建一个多级下拉列表,如下所示: 因此,当您将鼠标悬停在图标上时,下拉菜单会再次弹出,如果您将鼠标悬停在查看上,该子下拉菜单将会弹出并显示 Own (自己的)和共享 ...其余部分相同。
我找到了多个工作解决方案的线程,但仍然卡住了,无法解决。通常我使用bootstrap-dropdown-hove,它需要引导程序3,但是我当前的模板使用的是Bootstrap 4。
我相信根据需要进行多级下拉的代码如下:
<div class="dropdown">
<a class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<img src="https://icon-library.com/images/icon-info/icon-info-4.jpg" style="width:25px; height:25px;">
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">View</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Own</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">OE15jAN</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Shared</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">AXUh23</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item" tabindex="-1" href="#">Create</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Own</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">OE15jAN</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a class="dropdown-item" href="#">Shared</a>
<ul class="dropdown-menu">
<li class="dropdown-item"><a href="#">AXUh23</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-divider"></li>
<li class="dropdown-item"><a href="#">Share</a></li>
</ul>
</div>
但仍未按需要显示。这是我在jsfiddle中的code。我删除了大多数模板内容,只在导航栏上保留了需要添加多级下拉菜单的标题。
能否请您指导我我在代码中做错了什么?非常感谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。