Jquery 如何在Boostrap 4中创建多级下拉列表

Jquery 如何在Boostrap 4中创建多级下拉列表,jquery,css,twitter-bootstrap,bootstrap-4,drop-down-menu,Jquery,Css,Twitter Bootstrap,Bootstrap 4,Drop Down Menu,我想用bootstrap 4创建一个多级下拉列表,如下所示: 因此,当您将鼠标悬停在图标上时,下拉列表将弹出,如果您将鼠标悬停在视图上,子下拉列表将弹出并显示自己的和共享的。。。其余的也一样 我找到了多个线程的工作解决方案,但仍然卡住了,无法找到它。通常我使用需要引导3的模板,但我当前的模板使用引导4 我认为多级下拉列表的代码如下所示: <div class="dropdown"> <a class="btn btn-se

我想用bootstrap 4创建一个多级下拉列表,如下所示: 因此,当您将鼠标悬停在图标上时,下拉列表将弹出,如果您将鼠标悬停在视图上,子下拉列表将弹出并显示自己的共享的。。。其余的也一样

我找到了多个线程的工作解决方案,但仍然卡住了,无法找到它。通常我使用需要引导3的模板,但我当前的模板使用引导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的照片。我删除了大部分模板内容,只保留了标题上的导航栏,在那里我需要添加多级下拉列表

    你能告诉我我的代码哪里做错了吗?多谢各位