CODEWITHSUNDEEP
jquerycsstwitter-bootstrapdrop-down-menunav
rachel
rachel

Reputation: 11

Cannot get bootstrap dropdown to collapse

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

Upvotes: 0

Views: 1699

Answers (1)

melanie
melanie

Reputation: 647

Potential problem with the CSS:

Make sure your element with the class dropdown-menu is styled with display: none, either in your custom CSS or in the Bootstrap CSS file you're using, and that you don't have any other styling overriding that. (You can use your browser's Element Inspector to check.)

Here's how it should be working, from the CSS side:

The dropdown-menu should start out undisplayed.

.dropdown-menu {
    display: none;
}

Then, when you toggle the dropdown by clicking on your data-toggle button, an Angular directive should add the open class to the dropdown (the parent element), which will style the dropdown-menu with display: block.

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

Potential problem with the Javascript:

This wouldn't explain the initial state of the dropdowns, but it's worth checking: It's possible that your Bootstrap JS file doesn't have the proper wiring to handle dropdowns. Search your source file (bootstrap-3.3.4-dist/js/bootstrap.min.js) for data-toggle=dropdown; if you can't find that, you're probably lacking the relevant code.

Upvotes: 3

Related Questions