There is a page on bootstrap (3.3.7) with a drop-down menu that contains tabs and links. At this time, the menu opens hover, tabs work.

Sandbox

If you delete this js script in the sandbox:

$(document).ready(function(){ $(".dropdown").hover( function() { $('.dropdown-menu', this).stop( true, true ).slideDown("fast"); $(this).toggleClass('open'); }, function() { $('.dropdown-menu', this).stop( true, true ).slideUp("fast"); $(this).toggleClass('open'); } ); });

This drop-down menu is opened by clicking, but also closes by the next any click on tabs or another menu item and outside of it.

If you leave the JS code, the menu opens when you hover, and is not hidden when you click on the tabs (tabs).

How to make the menu show when clicked, while preventing the menu from closing the tabs and the empty space of the drop-down menu?

    1 answer 1

    Obviously, the easiest way is to move the code responsible for opening from hover() to click() :

     $(document).ready(function(){ $(".dropdown").click( function() { $('.dropdown-menu', this).stop( true, true ).slideDown("fast"); $(this).addClass('open'); } ) $(".dropdown").hover( function() { }, function() { $('.dropdown-menu', this).stop( true, true ).slideUp("fast"); $(this).removeClass('open'); } ); });

    Along the way, replacing toggleClass() with addClass() and removeClass()

    • It partially works, the menu is opened by clicking, but disappears as soon as the arrow disappears from the drop-down menu area. - Drakulitka
    • @Drakulitka I can not understand what you need. You need to specifically describe in the question when the menu appears and when it is hidden. - Crantisz
    • Opening a drop-down menu by clicking on the parent .dropdown; closing by clicking on the parent or outside the drop-down menu area. - Drakulitka
    • Obviously, this is a completely different question, but this has, of course, already been answered - Crantisz
    • Corrected menu, do not tell me how to prevent the incorrect effect of repeated clicking on the parent (.dropdown) - the menu hides and reappears, I would like it to be either hiding the menu or appearing, depending on the current state sandbox - Drakulitka