hide dropdown menu on click the item in the menu

Question

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?

Answer 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