Bootstrap top level item clickable and open dropdown on hover

Question

I'm using the yamm3 menu and I would like the top level menu items clickable and then show the dropdown on hover.

I'm using the following code to make the dropdown on hover instead of on click:

$('.navbar .dropdown').hover(function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(250).slideDown();
}, function() {
  $(this).find('.dropdown-menu').first().stop(true, true).delay(100).slideUp()
});

But I still having trouble getting to top menu items to be clickable.

Here is the HTML

 <div id="navbar-collapse-1" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">About Us<b class="caret"></b></a>
              <ul role="menu" class="dropdown-menu">
                <li><a tabindex="-1" href="#"> Meet Our Team</a></li>
                <li><a tabindex="-1" href="#"> Why GoPlay </a></li>
                <li><a tabindex="-1" href="#"> Affiliations </a></li>
                <li class="divider"></li>
                <li><a tabindex="-1" href="#">Contact US </a></li>
              </ul>
            </li>           
            <li class="dropdown yamm-fw"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Browse Tours<b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li>
                  <div class="yamm-content">
                    <div class="row">
                      <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Soccer" src="images/placeholder_browsetours_dropdown.png"></a><br/>Soccer</div>
                      <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Rugby" src="images/placeholder_browsetours_dropdown.png"></a><br/>Rugby</div>
                      <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Volleyball" src="images/placeholder_browsetours_dropdown.png"></a><br/>Volleyball</div>
                      <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Field Hockey" src="images/placeholder_browsetours_dropdown.png"></a><br/>Field Hockey</div>
                      <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Basketball" src="images/placeholder_browsetours_dropdown.png"></a><br/>Basketball</div>
                      <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Baseball and Softball" src="images/placeholder_browsetours_dropdown.png"></a><br/>Baseball/Sofatball</div>
                      <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Other Sports" src="images/placeholder_browsetours_dropdown.png"></a><br/>Other Sports</div>
                      <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Tournaments" src="images/placeholder_browsetours_dropdown.png"></a><br/>Tournaments</div>
                      <div class="col-xs-6 col-sm-2"><a href="#" class="thumbnail"><img alt="Fan Tours" src="images/placeholder_browsetours_dropdown.png"></a><br/>Fan Tours</div>
                    </div>
                  </div>
                </li>
              </ul>
            </li>
            <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Coaches<b class="caret"></b></a>
              <ul role="menu" class="dropdown-menu">
                <li><a tabindex="-1" href="#"> Sports Philosophy</a></li>
                <li><a tabindex="-1" href="#">Five Steps Planning Your Tour </a></li>
                <li><a tabindex="-1" href="#"> What to Expect </a></li>
                <li><a tabindex="-1" href="#"> Benefits </a></li>
                <li><a tabindex="-1" href="#"> Service Guarantee </a></li>
                <li><a tabindex="-1" href="#"> What to Expect Overseas</a></li>
                <li><a tabindex="-1" href="#"> Download Coaches Handbook</a></li>
              </ul>
            </li> 
            <li class="dropdown"><a href="#" data-toggle="dropdown" class="dropdown-toggle">Players<b class="caret"></b></a>
              <ul role="menu" class="dropdown-menu">
                <li><a tabindex="-1" href="#"> Travel With GoPlay</a></li>
                <li><a tabindex="-1" href="#"> What to Pack </a></li>
                <li><a tabindex="-1" href="#"> Making Payments </a></li>
                <li><a tabindex="-1" href="#"> Automatic Payments </a></li>
                <li><a tabindex="-1" href="#"> Protection Plans </a></li>
                <li><a tabindex="-1" href="#"> Keeping in Touch </a></li>
                <li><a tabindex="-1" href="#"> GoPlay Travel App </a></li>
                <li><a tabindex="-1" href="#"> FAQ </a></li>                
              </ul>
            </li>
            <li class="no-dropdown"><a href="#"> Flights </a></li>
            <li class="no-dropdown"><a href="#"> Blog </a></li>                       
          </ul>
        </div>

Please include the HTML as well in your question and take a look at [mcve](http://stackoverflow.com/help/mcve) — sandeep s, Dec 10 '15 at 18:20

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

you have to delete the data-toggle="dropdown" on your top-level-items. otherwise it won't work. and i would suggest to use CSS-only for the dropdown-onhover.

therefore possible duplicate of this: How to make twitter bootstrap menu dropdown on hover rather than click

edited May 23 '17 at 11:52

Community

1
1

answered Dec 11 '15 at 12:11

dstN

332
6
21

score 0 · Answer 2 · answered May 11 '16 at 12:56

Since I had a bunch of other code that needs to normally run in a non-dropdown-hoverable component, I solved this issue by utilizing the native events in bootstraps dropdown.js. The solution found in the other thread which utilized css would not work in my case.

Below is my solution which is a bit more verbose since I added a timer for visibility and hidden states. If that's removed, the solution is probably close to 8 lines of code.

export default class DropdownHover extends Dropdown {

constructor(...args){
    super(...args)

    this.timerIn = null;
    this.timerOut = null;

    this.inTime = 250
    this.outTime = 100

}

config(isInitialized){
    super.config(isInitialized)
    if(isInitialized) return

    var button = this.$()
    button.hover(this.mouseIn.bind(this), this.mouseOut.bind(this))

    this.dropdown = this.$()

}

mouseIn(){
    if(this.timerIn) {
        clearTimeout(this.timerIn);
        this.timerIn = null

        // If there are any gaps between the dropdown
        // and the menu this will fix it
        clearTimeout(this.timerOut);
        this.timerOut = null
    }

    this.timerIn = setTimeout(() => {
        this.dropdown
            .addClass('open')
            .trigger($.Event('shown.bs.dropdown')) // If you look in dropdown.js this is the event used to trigger other actions.
    }, this.inTime)
}

mouseOut(){
    if(this.timerOut) {
        clearTimeout(this.timerOut);
        this.timerOut = null
    }
    this.timerOut = setTimeout(() => {
        this.dropdown
            .removeClass('open')
            .trigger($.Event('hidden.bs.dropdown'))
    }, this.outTime)
}
}

Bootstrap top level item clickable and open dropdown on hover

2 Answers2