【问题标题】:Multiple dropdown nav bootstrap多个下拉导航引导
【发布时间】:2015-09-24 07:17:59
【问题描述】:

我正在尝试在引导程序中创建多个下拉菜单,但未显示第 3 级。这个导航的重点是当你点击第一层时,第二层会弹出,在这个层上应该有 3 个项目。这些项目应该有一个下拉列表,但它们没有显示。 (导航是xs模式)

这是我的导航栏代码:

<ul class="nav navbar-nav visible-xs" id="top-menueen">
    <li>
        <a href="#"><i class="fa fa-home fa-fw fa-2x"></i> <span>Home</span></a>
    </li>
    <li>
        <a href="#"><i class="fa fa-newspaper-o fa-fw fa-2x"></i> <span>News</span></a>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-bar-chart fa-fw fa-2x"></i>Statistics <b class="caret"></b></a>
        <ul role="menu" class="dropdown-menu">
            <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">A<b class="caret"></b></a>
                    <ul role="menu" class="dropdown-menu">
                        <li><a href="#">A.A</a></li>
                    </ul>
            </li>
            <li><a href="#">B</a></li>
            <li><a href="#">C</a></li>
        </ul>
    </li>
    <li class="dropdown">
        <a data-toggle="dropdown" class="dropdown-toggle" href="#"><i class="fa fa-user fa-fw fa-2x"></i>People <b class="caret"></b></a>
        <ul role="menu" class="dropdown-menu">
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
        </ul>
    </li>
</ul>

【问题讨论】:

    标签: html drop-down-menu navbar


    【解决方案1】:

    查看此链接: http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3

    我认为这应该对你有很大帮助。

    编辑:抱歉,我刚刚看到您使用的是“visible-xs”,所以我猜这是为移动设备制作的。

    如果您将其用于移动设备,请尝试使用 javascript / jquery 进行设置,如下所示:http://www.bootply.com/nZaxpxfiXz

    【讨论】:

    • 我看不到我的问题。当我单击统计信息时,下拉菜单打开并显示(A、B、C),但当我想深入了解 A 时,菜单关闭并显示前 4 个元素(主页、新闻、统计信息、人员)。
    • 您可以使用 css(悬停时打开子菜单)解决这个问题,就像我在回答中给您的链接一样,或者使用 javascript / jquery 像这里:bootply.com/nZaxpxfiXz 来打开点击子菜单。跨度>
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-05-15
    • 2017-01-26
    • 1970-01-01
    相关资源
    最近更新 更多