无法让引导下拉菜单折叠答案

【问题标题】：Cannot get bootstrap dropdown to collapse无法让引导下拉菜单折叠
【发布时间】：2015-07-14 08:06:57
【问题描述】：

所以我只是尝试使用引导程序使几个导航链接下拉，但对于我的生活，我无法让菜单收回。它们都开始打开（相互重叠）并且它们不会关闭（见下文）我只需要下拉菜单正常响应，并且如果您单击一个新的下拉菜单可能会自动关闭另一个。代码：

<head>

<title>Flemington Supply | <?php echo $pageTitle; ?></title>

<script type='text/javascript' src="support/jquery.min.js"></script>

<link href = "bootstrap-3.3.4-dist/css/bootstrap.min.css" rel = "stylesheet" media = "screen">
<link rel="stylesheet" type="text/css" href="redox.css">

<link href="support/carousel.css" rel="stylesheet">

<script type='text/javascript' src="http://imsky.github.io/holder/holder.js"></script>
<script type='text/javascript' src="bootstrap-3.3.4-dist/js/bootstrap.min.js"></script>
<script src="support/carousel.js"></script>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script type="text/javascript">
document.getElementByClass('changetext').onmouseover.style.color = "#0000ff;";
</script>

</head>

<body>

<div class = "nav navbar">
    <div class = "container">

        <div>
        <ul class = "pull-left">
            <li>
                <a href = "#"><img src = "site1/images/flemsupp.jpeg" height = "60px"></a>
            </li>
            <li><a href = "#">Linecard</a></li>         
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">
                Company <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Invoice Connection</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Terms and Conditions</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Credit Application</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">
                Products <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Our Products</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Eljer Products</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Legend Product Line</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Closeouts</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Specials</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="true">
                Contact <span class="caret"></span>
              </a>
              <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Contact Us</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Recent Jobs</a></li>
                <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Recommended Plumbers</a></li>
              </ul>
            </li>
        </ul>
    </div>

        <ul class="pull-right ulright">
            <li><a href="#">Get Directions</a></li>
            <li>Call Us: (908) 782-2221</li>
        </ul>

    </div>
</div>

ps 我知道有些标签没有关闭/丢失，但是这个页面被包含在另一个标签中

【问题讨论】：

观看此视频：youtube.com/watch?v=qpWlaOeGZ_4。这是一个关于引导菜单的非常好的视频
感谢这是一个有用的视频，但它并没有解决我的问题。我只是不明白为什么它会默认打开以及为什么切换菜单的按钮无法工作

标签： jquery css twitter-bootstrap drop-down-menu nav

【解决方案1】：

CSS 的潜在问题：

确保您的具有 dropdown-menu 类的元素在您的自定义 CSS 或您正在使用的 Bootstrap CSS 文件中使用 display: none 进行样式设置，并且您没有任何其他样式覆盖它。（您可以使用浏览器的Element Inspector查看。）

从 CSS 方面来看，应该是这样工作的：

dropdown-menu 一开始应该不显示。

.dropdown-menu {
    display: none;
}

然后，当您通过单击 data-toggle 按钮来切换下拉菜单时，Angular 指令应将 open 类添加到 dropdown（父元素），这将使用 @987654331 设置 dropdown-menu 的样式@。

.open > .dropdown-menu {
  display: block;
}

Javascript 的潜在问题：

这无法解释下拉菜单的初始状态，但值得检查：您的 Bootstrap JS 文件可能没有 the proper wiring to handle dropdowns。在源文件 (bootstrap-3.3.4-dist/js/bootstrap.min.js) 中搜索data-toggle=dropdown；如果找不到，可能是缺少相关代码。

【讨论】：