0

I have five buttons, for each button, if you mouseover it, it will popup the dropdown menu (The default setting in bootstrap for dropdown is to click, but I need the button to achieve some other purposes when click the button, so I use a e.stopPropagation() to prevent the click popup action). In the css file, I set 

.dropup:hover .dropdown-menu {
    display: block;
}

My question is that, when I click the item in the dropdown menu, it will not hide anymore. Is there anyway to solve this issue?

Guifan Li
  • 165
  • 2
  • 14

1 Answers1

1

Could you do something like this in place of your css so you don't have to rewrite functionality?

$(function() {
    $(".dropdown").hover(
        function(){ $(this).addClass('open') },
        function(){ $(this).removeClass('open') }
    );
});

Reference: https://stackoverflow.com/a/21486327/1585362

Community
  • 1
  • 1
Jack
  • 2,741
  • 2
  • 24
  • 32