Question

我具有显示Bootstrap-4菜单的标记，其中包含4个项目。

每个菜单项都有一个嵌套子菜单。（并且我打算更深入）

第一项的子菜单正确显示。（物流，物流，物流）

以下项目不显示其各自的子菜单，但重复第一项的子菜单。（物流，物流，物流）

任何建议将不胜感激。...

我检查了标记，因此所有行都对齐并正确嵌套。我找到了只有1个子菜单的引导菜单示例，并且该示例很有效。子菜单超过1个会导致此问题。

<Done>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Home
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Applications
</a>


<ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink11">

<div class="dropdown-menu">
                <a class="dropdown-item" href="">Logistics</a>
                <a class="dropdown-item" href="">Logistics</a>
                <a class="dropdown-item" href="">Logistics</a>
            </div>

    </ul>




    <a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Technical Support
    </a>
    <ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink12">

            <div class="dropdown-menu">
                <a class="dropdown-item" href="/screens/utility.htm">Downloads</a>
                <a class="dropdown-item" href="/screens/down_install.htm">Installation</a>

            </div>

    </ul>








    <a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        External Links
    </a>
    <ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink13">

            <div class="dropdown-menu">
                <a class="dropdown-toggle dropdown-item" href="#" id="navbarDropdownMenuLink14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                    Logik Center
                </a>
                <ul class="dropdown-submenu" aria-labelledby="navbarDropdownMenuLink14">

                        <div class="dropdown-menu">
                            <a class="dropdown-item" href="javascript:window.open('http://logik.pwv.gov.za')">Log Request</a>
                            <a class="dropdown-item" href="javascript:window.open('http://10.131.15.145/vulindlela/requests_login.htm')">View Request</a>

                        </div>

                </ul>
                <a class="dropdown-item" href="javascript:window.open('http://xxxxxx')">Persal</a>
                <a class="dropdown-item" href="javascript:window.open('http://xxxxxx')">Logis</a>
                <a class="dropdown-item" href="javascript:window.open('http://xxxxxxxx/')">BAS</a>
                <a class="dropdown-item" href="javascript:window.open('http://xxxxxxx')">Government</a>
                <a class="dropdown-item" href="javascript:window.open('http://xxxxxxx')">National </a>
                <a class="dropdown-item" href="javascript:window.open('http://www.xxxxxxxx/')">Bank</a>

            </div>

    </ul>



    <a class="dropdown-item" href="/screens/vulhistory.htm">History</a>
    <a class="dropdown-item" href="/screens/contactus.htm">Contacts</a>
    <a class="dropdown-item" href="/screens/main.htm">Home</a>



</ul>

</li>

</Done>

我希望每个项目的子菜单都能显示，而不仅仅是第一项子菜单的重复。

让我知道是否需要提供更多信息。

Answer 1

这可能取决于您嵌套菜单的方式。在下面查看带有2个下拉菜单的工作示例。

代码如下：

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link</a>
    </div>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action2</a>
      <a class="dropdown-item" href="#">Another action2</a>
      <a class="dropdown-item" href="#">Something else here2</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Separated link2</a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

具有多个子菜单的Bootstrap菜单会重复第一个子菜单

1 个答案: