CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
mrwnt10
mrwnt10

Reputation: 1415

Bootstrap dropdown menu not working

I am a jQuery beginner and am trying to get the hang of it by using the Twitter-Bootstrap dropdown feature, but nothing drops down when I click on the "Google" li. I was pretty confused about why it wasn't working so I just started throwing things into my own code from the code from the example dropdown menu on the Bootstrap website. That would be the explanation for any code that seems superfluous.

Here is my jsFiddle.

jQuery:

$(document).ready(function() {
    $('dropdown-toggle').click(function() {
        $(this).dropdown();
    });   
    $('li a').hover(function() {
        $(this).toggleClass("hover");
    });    
});

HTML:

<div id="container">
    <ul class="nav">
        <li class="dropdown">
            <a id="drop1" class="dropdown-toggle" data-toggle="dropdown" role="button" href="#">Google</a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="drop1">
                <li>
                    <a href="www.google.com">Google</a>
                </li>
                <li>
                    <a href="www.gmail.com">Gmail</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="www.facebook.com">Facebook</a>
        </li> 
    </ul>
</div>

Why is the drop-down menu not working?

Side question: I had my navigation menu lis styled so that when you hovered over each, the background color would not change but the text would become a lighter grey. After I linked to Bootstrap, hovering now changes the background color to white and the text color to blue. Why?

Upvotes: 2

Views: 4094

Answers (2)

PSL
PSL

Reputation: 123739

Couple of things. The way you have your drop-downs set up, you don't need the click trigger to open up. Also your dropdowns were opening up but it was showing up in the scroll. With a couple of changes you can make it work.

.nav {
    overflow:visible; /*Changed from auto*/
}

#container {
    background-color:#333333;
    width: 100%;
    margin:auto;
    background-image: -moz-linear-gradient(top, rgb(34, 34, 34), rgb(17, 17, 17));
    display:inline-block; /*Added this to get your background color to get applied*/
}

Demo

You can safely remove your dropdown-toggle click event, even though the selector was wrong, as @Zenith mentioned. Bootstrap takes care of it using data-toggle="dropdown" on the markup.

For your second question. Bootstrap styles overrides your styles. So apply these styles:

instead of .hover use this: to override BS styles:-

.nav>li>a.hover, .nav>li>a:focus {
    color:#C9C9C9;
    background-color:#333333;
}

Full Demo

Also you probably don't need 

 $('li a').hover(function () {
        $(this).toggleClass("hover");
    });

Instead, you can handle it with:

.nav>li>a:hover, .nav>li>a:focus {
        color:#C9C9C9;
        background-color:#333333;
    }

Upvotes: 2

davidejones
davidejones

Reputation: 1949

you might want to add jquery to your fiddle under frameworks & extensions then under external resources enter http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/js/bootstrap.min.js and click the plus icon.

remove the overflow:auto on #nav and you can actually remove most of the javascript and you will see the nav will dropdown on the click you just then need to style it somewhat

Upvotes: 0

Related Questions