0

I have a bootstrap dropdown menu on my navbar and it opens whenever I hover over the link. However, it has become annoying because on certain screens in my application I have buttons near the top right of the screen and when users move their mouse near the buttons, the dropdown opens on the hover. I'd rather just have it open only when you click on the link.

  <ul class="nav navbar-nav navbar-right">
        <li role="presentation" class="dropdown">
            <a href="#" class="dropdown-toggle" style="font-size: medium" data-toggle="dropdown" role="button" aria-expanded="false">
                <i class="glyphicon glyphicon-user"></i>&nbsp; @User.Identity.GetDisplayName() &nbsp;
                <i class="fa fa-caret-down"></i>
            </a>                
            <ul class="dropdown-menu">
                    <li>@Html.ActionLink("User Admin", "Index", "Users")</li>
                    <li role="separator" class="divider"></li>
                    <li>@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
                    <li role="separator" class="divider"></li>
                <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
            </ul>            
        </li>
    </ul>
David W.
  • 31
  • 3
  • 1
    Possible duplicate of [bootstrap dropdown only on click](http://stackoverflow.com/questions/35780836/bootstrap-dropdown-only-on-click) – Andrea Carraro May 02 '17 at 15:15
  • 1
    Possible duplicate of [BootStrap3 keep the dropdown menu open after click on the item](http://stackoverflow.com/questions/21982308/bootstrap3-keep-the-dropdown-menu-open-after-click-on-the-item) – Troyer May 02 '17 at 15:15

1 Answers1

0

add this to your custom javascript:

$(document).ready(function () {
$(document).click(function (event) {
    var clickover = $(event.target);
    var _opened = $(".navbar-collapse").hasClass("in");
    if (!$(event.target).closest('.navbar').length && _opened === true && !clickover.hasClass("navbar-toggle")) {
        $(".navbar-collapse").collapse('toggle');
    }
});

});

look at your example in codepen https://codepen.io/faw/pen/MmoOjm

  • Thanks for the reply, but that didn't solve my issue. My question isn't how to get it to open by clicking, but rather, how to keep it from opening when you hover over it. I've been combing through my custom css and js and I don't see anywhere that I'm telling it to open on hover.... – David W. May 02 '17 at 17:51
  • isn't it already the case in my example , http://s.codepen.io/faw/debug/MmoOjm/GnrnbVVzxBpr for me it opens only on click and not on hover –  May 02 '17 at 18:29
  • When I use your code I still get the same behavior, so that is telling me that there is something else in the bootstrap.js or bootstrap.css that is adding the 'open' class to my dropdown on hover. – David W. May 02 '17 at 18:44
  • have you looked at the codepen example i providede, there i ahve bootstrap version 3.3.7 css and js and the dropdown only opens on click –  May 02 '17 at 18:46