文章/答案/技术大牛

发布

社区首页 >问答首页 >带有多个子菜单的引导菜单重复第一个子菜单

问带有多个子菜单的引导菜单重复第一个子菜单
EN

Stack Overflow用户

提问于 2019-02-13 23:02:34

回答 1查看 144关注 0票数 0

我有一个显示Bootstrap-4菜单的标记，上面有4个项目。

每个菜单项都有一个嵌套的子菜单。(我计划做得更深入)

第一个项目的子菜单显示正确。(物流，物流，物流)

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

任何人的建议都将不胜感激……

我检查了我的标记，因此行是对齐的，并且所有行都是正确嵌套的。我发现了一些只有一个子菜单的引导菜单的例子，而且(很明显)它是有效的。拥有一个以上的子菜单就会产生这个问题。

<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>

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

如果我需要提供更多信息，请告诉我。

asp.net-mvc

bootstrap-4

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-02-14 00:03:27

这可能与你嵌套菜单的方式有关。查看下面的包含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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54673246

复制

相似问题

问带有多个子菜单的引导菜单重复第一个子菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有多个子菜单的引导菜单重复第一个子菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有多个子菜单的引导菜单重复第一个子菜单
EN