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

Question

我有一个客户的要求来处理他们的下拉菜单系统。 我将菜单用作下拉菜单，但他们要求下拉菜单不在悬停时发生，但必须“单击”以显示它们，甚至包括所有疯狂的子菜单。

此外，即使顶层导航项目已关闭，他们也希望菜单在其显示状态下保持打开（固定）状态。 我知道这是奇怪的行为，但这就是他们想要的。 应当注意，任何时候都只能打开一个最上层的nab菜单项。 他们正在使用iframe来显示href，因此我们现在不需要cookie来保存菜单的状态，但将来会很好；）我不是javascript人，这是从代码中整理来的我聚集了，但我很茫然。 我确实设法一次更改了一些JS以通过单击来处理打开菜单的操作，但是一旦鼠标移出UL，它就会消失。

到目前为止，我已经在这里发布了我的代码： http : //jsfiddle.net/9dJ9T/8/

任何人都无法使菜单仅在单击时显示，并保持打开和“固定”状态，直到随后全部“取消固定”为止。 理想情况下，我认为jquery .toggle方法会更好，但此菜单系统中包含如此众多的UL和LI，我无法想象为每个菜单创建功能！ 有没有一种方法可以抽象出这样的函数以简化代码，而不会以大量的函数结尾？ 我很想向JS大师学习！！

Answer 1

您不需要所有这些。 重新制作。 您可以用10行解决。

添加类似onclick =“ displaySubmenu（'someIdOrSomethingOrWhateverYouWant'）;”的内容。 在每个标签上。

js一定是这样的

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

其余的是css和html。

如果您想保持淡入淡出，只需保留该功能并将其设置在您的ID上即可。

Answer 2

简单的部分是打开正确的一个，然后关闭另一个

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

更为复杂的部分是，当用户在任何菜单区域之外单击时（如在主要内容上），应关闭选项卡。

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

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

Answer 3

尝试这个

<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>

和js

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

}）;