CODEWITHSUNDEEP
jqueryhtmltwitter-bootstrap-3
Bendy
Bendy

Reputation: 3576

Hover-over of Twitter bootstrap button not working properly

I am trying to get a popup dropdown menu for my button as in the below snippet using jQuery but with no luck.

I am following similar logic to what I have in my bootstrap navbar (which works fine), however as in the below example, when I hover over the button I can see the menu items but as soon as I move the mouse off the button the menu disappears - what am I doing wrong??

PS If I move the cursor quickly I can just about 'catch' the popup menu.

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
        
             
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

<script>
    $(function(){
        $('.dropdown').hover(function() {
                    $(this).addClass('open');
                },
                function() {
                    $(this).removeClass('open');
                });
    });
</script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div class="container">
    <div class="dropdown">
        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
            Select event:
            <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <li><a  href="event/1">Event #1</a></li>
            <li><a  href="event/2">Event #2</a></li>
        </ul>
    </div>
</div>

Upvotes: 2

Views: 127

Answers (2)

Suresh Ponnukalai
Suresh Ponnukalai

Reputation: 13988

For your dropdown menu apply the top position 98% instead of 100%. So that it will not go out of the focus of dropdown div.

 .dropdown-menu { top: 98% }

Upvotes: 1

brianlmerritt
brianlmerritt

Reputation: 2842

Just add a bit of css

.dropdown-menu { margin:0; }

The margin space made it hard to jump across to the items

Upvotes: 1

Related Questions