Question

So I'm just trying to make a couple nav links drop down using bootstrap, but for the life of me I can't get the menus to retract. They all start off open (overlapping each other) and they won't close (seen below) I just need the dropdowns to respond normally and maybe automatically shut another one if you click a new one. Code:

<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 I know some tags aren't closed/missing but this page is being included in another one

Answer 1

CSS的潜在问题：

确保您的班级dropdown-menu的元素使用display: none设置样式，可以在自定义CSS或您正在使用的Bootstrap CSS文件中使用，并且不要使用有任何其他造型压倒一切。（您可以使用浏览器的 Element Inspector 进行检查。）

的工作原理

dropdown-menu应该以未显示的方式开始。

.dropdown-menu {
    display: none;
}

然后，当您通过单击data-toggle按钮切换下拉列表时，Angular指令应将open类添加到dropdown（父元素），这将设置样式dropdown-menu与display: block。

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

Javascript的潜在问题：

这不能解释下拉列表的初始状态，但值得检查：您的Bootstrap JS文件可能没有 {{3} } 即可。搜索data-toggle=dropdown的源文件（bootstrap-3.3.4-dist / js / bootstrap.min.js）;如果你找不到，那么你可能缺少相关的代码。

Cannot get bootstrap dropdown to collapse

1 个答案: