Question

我有3级菜单结构

主菜单菜单1 菜单1 -1

<ul class="nav navbar-nav navbar-right">
    <li class="tittle">
        <a href="#" class="dropdown-toggle btn btn-default" data-toggle="dropdown" aria-expanded="false"> Main Menu </a>
        <ul class="dropdown-menu">
            <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Menu 1</a>
                <ul class="dropdown-menu ">
                    <li class="dropdown-submenu">Menu 1 -1</li>
                    <li class="dropdown-submenu" >Menu 1 -2</li>
                    <li class="dropdown-submenu" >Menu 1 -3</li>
                </ul>
            </li><li class="dropdown"><a  href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Menu 2</a>
                <ul class="dropdown-menu">
                    <li class="dropdown-submenu">Menu 2 -1</li>
                    <li class="dropdown-submenu" >Menu 2 -2</li>
                    <li class="dropdown-submenu" >Menu 2 -3</li>
                </ul>
            </li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Menu 3</a>
                <ul class="dropdown-menu">
                    <li class="dropdown-submenu">Menu 3 -1</li>
                    <li class="dropdown-submenu" >Menu 3 -2</li>
                    <li class="dropdown-submenu" >Menu 3 -3</li>
                </ul>
            </li><li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Menu 4</a>
                <ul class="dropdown-menu">
                    <li class="dropdown-submenu">Menu 4 -1</li>
                    <li class="dropdown-submenu" >Menu 4 -2</li>
                    <li class="dropdown-submenu" >Menu 4 -3</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

这是我的代码结构

如果单击主菜单，它将显示菜单1，菜单2，菜单3

然后，如果我单击菜单1，它将不会显示菜单1 -1，菜单1 -2，菜单1 -3

如果我单击菜单1，则 aria-expanded =“ false” 在主菜单中变为

如何解决此问题？还是可以建议其他方式

Answer 1

简化版，但是应该可以帮助您

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js"></script>

<div id="mainmenu" class="row">
  <div class="list-group panel">
    <a href="#menu1" class="list-group-item" data-toggle="collapse" data-parent="#mainmenu">Menu <span class="menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
    <div class="collapse pos-absolute" id="menu1">
      <a href="#submenu1" class="list-group-item sub-item" data-toggle="collapse" data-parent="#submenu1">Menu 1 <span class=" menu-ico-collapse"><i class="glyphicon glyphicon-chevron-down"></i></span></a>
      <div class="collapse list-group-submenu" id="submenu1">
        <a href="#" class="list-group-item" data-parent="#submenu1">Menu Menu 1</a>
        <a href="#" class="list-group-item" data-parent="#submenu1">Menu Menu 2</a>
        <a href="#" class="list-group-item" data-parent="#submenu1">Menu Menu 3</a>
        <a href="#" class="list-group-item" data-parent="#submenu1">Menu Menu 4</a>
      </div>
    </div>
  </div>

引导三级菜单在单击时不起作用

1 个答案: