Question

我正在使用bootstrap3并创建了一个下拉菜单，顶层的孩子们工作正常但是当我试图点击“关于”时父母不工作，它只显示孩子们并没有去约.php

<div class="collapse navbar-collapse navbar-ex1-collapse">
            <ul class="nav navbar-nav">
                <li><a href="index.php">Home</a>
                </li>
                <li class="dropdown"><a href="about.php" data-toggle="dropdown" class="dropdown-toggle">About<b class="caret"></b></a>
                <ul class="dropdown-menu">
                   <li><a href="hours.php">Hours</a> </li>
                   <li><a href="terms.php">Terms/Conditions of Hire</a> </li>
                </ul>
                </li>
                <li><a href="location.php">Find Us</a>
                </li>
                <li><a href="services.php">Services</a>
                </li>
                <li><a href="contact.php">Contact</a>
                </li>
            </ul>
        </div>

Answer 1

您尝试做的事情不起作用，因为下拉列表被点击，并且没有任何操作，只能打开菜单。您可以在示例here in the documentation

中清楚地看到这一点

如果您点击about.php时按下了About按钮，则无法打开下拉菜单以选择其他项目。

如果你想要一个按钮，你可以点击和下拉菜单，你应该看一下添加一个拆分按钮下拉列表（documentation here），这将使用一个可点击的按钮和一个下拉菜单箭头选择更多选项。

Answer 2

navbar子元素设置为基于切换工作。因此，实际上，当您单击“关于”时，应显示子元素。现在，根据您的要求，您可以更改它以显示hover上的子元素，以便您点击“关于”链接。

首先，从锚标记中删除这两个属性：

class="dropdown-toggle" data-toggle="dropdown"

接下来，在你的css中，设置要在悬停时显示的子菜单：

ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;    
}

对于工作，你可以检查：

<强> DEMO

Bootstrap顶级下拉菜单无法正常工作

2 个答案: