如何使CSS下拉菜单即使在菜单外单击也能保持打开状态？

Question

I have a request from a customer to handle their drop down menu system. I have the menus working as drop downs but they requested that the drop downs happen not on a hover, but must be "clicked" to display them, even all the crazy sub menus.

Furthermore, they want the menus to stay open (pinned) in their revealed state even if the top level nav item is closed. I know it's strange behaviour but it's what they want. It should be noted that only one top nab menu item should be open at any time. They are employing an iframe to display the hrefs so we don't need cookies to save the state of the menus at this time but it would be nice for the future ;) I'm not a javascript person, this was cobbled together from code I gathered but I'm at a loss. I did manage to change a bit of JS at one time to handle opening the menus via a click but once the mouse moved out of the ULs it would disappear.

I've posted my code so far here: http://jsfiddle.net/9dJ9T/8/

Can anyone get the menus to only display when clicked and stay opened and "pinned" until they are all subsequently "unpinned"? Ideally I think jquery .toggle method would be better but this menu system has so many UL and LIs in it I can't imagine creating functions of each and every one!! Is there a way such a function could be abstracted to simplify the code and not end up with a huge list of functions? I'm eager to learn from the JS masters!!

Answer 1

You don't need all that. Remake it. You can solve that in like 10 lines.

Add something like onclick="displaySubmenu('someIdOrSomethingOrWhateverYouWant');" on each tab.

The js must be something like

    function displaySubmenu(el)
    {
         // Hide all elements. (Easy to do)
         // Display the needed one. (document.getElementById('yourSetedId').style.display ='block');
    }

The rest is css and html.

If you wanna keep the fade just keep that function and set it on your id.

Answer 2

The easy part is just opening the right one and closing the others

$(".dropTab").on("click", function(){
    $(".dropTab").hide();
    $(this).show();
})

the bit more complicated part is where the tab should close when the user clicks outside any menu area, like just on the main content.

$("body").on("click",function(e) {
    if ($(e.target).closest(".headerBar").length) { 
        return;
    }

    $(".dropTab").hide();
});

Answer 3

try this

<div class="btn-group" id="myDropdown"><a class="btn dropdown-toggle" data-toggle="dropdown" href="#">Menu<span class="caret"></span></a><ul class="dropdown-menu"><li><a href="#">Choice1</a></li>
<li><a href="#">Choice2</a></li>
<li><a href="#">Choice3</a></li>
<li class="divider"></li>
<li><a href="#">Choice..</a></li></ul></div>

and the js

$('#myDropdown').on('hide.bs.dropdown', function () {
return false;

});