带有按钮组的引导下拉切换在导航栏中不起作用

Posted 2023-03-05

【中文标题】带有按钮组的引导下拉切换在导航栏中不起作用

【英文标题】：Bootstrap dropdown toggle with button group does not work in nav-bar

【发布时间】：2016-03-22 10:44:09

【问题描述】：

我正在开发 MVC 5 并使用 Bootstrap 进行前端设计。我的共享文件夹中有 CShtml 布局页面。所有布局都包含一个导航栏，其中包含多个选项。但是，<form class="navbar-form navbar-right"></form> 中的 btn 组不显示下拉菜单。这是代码sn-p：

<form class="navbar-form navbar-right">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <div class="btn-group">
                 <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
                     <span class="glyphicon glyphicon-user"></span> @Session["emp_main_first"] <span class="caret"></span>
                 </button>

                 <!-- dropdown menu items-->
                 <ul class="dropdown-menu" role="menu">
                     <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit profile</a></li>
                     <li><a href="../EmployeeRegister/LogOut"><span class="glyphicon glyphicon-cog"></span> Log out</a></li>
                 </ul>
            </div>
        </li>
    </ul>
</form>

我错过了什么？任何帮助将不胜感激。提前致谢。

【问题讨论】：

我很困惑，因为我测试了这里显示的代码，下拉菜单显示如下：bootply.com/HyPzXN0L1I

感谢@jamie。我缩小了问题的范围。该控件在除一种之外的所有其他布局中工作。我正在使用相同的导航栏而不对其进行任何更改，但令人惊讶的是，当我单击按钮时，下拉菜单不会出现。这可能是什么问题？

您是否可以创建 bootply 示例，以便我可以看到整个页面，因为您在此处显示的代码在我测试时似乎正在工作

要注意的是，如果我在任何其他页面中使用代码或者说小提琴，它似乎工作得很好。仅当我在该特定页面中使用它时，它才起作用。引导引用有什么问题吗？

您使用的是最新的引导资源吗？

【参考方案1】：

您可以尝试下面的代码，它应该适用于您的情况。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<form class="navbar-form navbar-right">
    <ul class="nav navbar-nav navbar-right">
        <li>
            <div class="btn-group">
                 <button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
                     <span class="glyphicon glyphicon-user"></span> @Session["emp_main_first"] <span class="caret"></span>
                 </button>
                 <!-- dropdown menu items-->
                 <ul class="dropdown-menu" role="menu">
                     <li><a href="#"><span class="glyphicon glyphicon-pencil"></span> Edit profile</a></li>
                     <li><a href="../EmployeeRegister/LogOut"><span class="glyphicon glyphicon-cog"></span> Log out</a></li>
                 </ul>
            </div>
        </li>
    </ul>
</form>

【讨论】：

非常感谢费萨尔。这解决了问题。但是我仍然想知道导致此问题的实际错误是什么！ ://

我认为有冲突，您使用的旧 jquery 库与引导 javascript 文件冲突。

【参考方案2】：

您可以使用<a></a> 代替<button></button> 并应用css。

<div class="btn-group dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
       <ul class="dropdown-menu"></ul>
</div>

希望这对你有用！

【讨论】：

无论出于何种原因，这解决了我在面板页脚内使用 btn-group 时遇到的问题

【参考方案3】：

给下拉菜单一个 ID，然后从 data-target 调用它 所以，

<button type="button" class="btn btn-link dropdown-toggle" data-toggle="dropdown" data-target="#dropdown">

然后，使用来自

的 ID 调用它

<ul class="dropdown-menu" role="menu" id="dropdown">

这会查找要切换的内容的 ID（因此，要显示的菜单）。