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

我收到一位客户的请求，要求处理他们的下拉菜单系统。我将菜单作为下拉菜单使用，但他们要求下拉菜单不在悬停位置，而是必须“单击”以显示它们，甚至所有疯狂的子菜单

此外，他们希望菜单在其显示状态下保持打开（固定），即使顶级导航项目关闭。我知道这是一种奇怪的行为，但这正是他们想要的。需要注意的是，任何时候都只能打开一个顶部nab菜单项。 他们正在使用iframe来显示HREF，因此我们现在不需要cookies来保存菜单的状态，但这对将来会很好；） 我不是一个javascript的人，这是从我收集的代码拼凑而成的，但我不知所措。我确实一次修改了一点JS，通过点击打开菜单，但一旦鼠标移出ULs，它就会消失

到目前为止，我已经在这里发布了我的代码：

---

有人能让菜单只在单击时显示，并保持打开和“固定”状态，直到随后全部“取消固定”为止吗？理想情况下，我认为jquery.toggle方法会更好，但这个菜单系统中有这么多UL和LIs，我无法想象创建每一个的函数！！有没有一种方法可以抽象出这样一个函数来简化代码，而不是以一个庞大的函数列表结束？我渴望向JS大师学习

你不需要这些。重拍。你可以用10行来解决这个问题

在每个选项卡上添加类似onclick=“displaysemon（'someIdOrSomethingOrWhateverYouWant'）；”的内容

js必须是类似于

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

剩下的是css和html

---

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

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

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

更复杂的部分是，当用户在任何菜单区域外单击时，选项卡应该关闭，就像在主内容上单击一样

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

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

试试这个

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

---

}))

所有这些代码真的有必要吗？这里有很多不相关的CSS和JS，使帮助成为一项更艰巨的任务。您能否将代码简化为仅再现问题的代码？通常，您可能希望：1）删除基于CSS的

：hover

效果；2） 向菜单项添加jQuery

。单击（）

处理程序以切换子菜单。后一部分应该只用于顶级项目，因此手动绑定每个事件并不可怕。但是，如果你想让它更像一种模式，你只需要为所有顶级菜单元素设置一个选择器，并为每个元素设置一种识别其子菜单元素的方法。我同意@David的观点。您应该删除更多的示例代码，并将其提取为一个菜单项和几个子菜单项。这将使我们更容易帮助你。谢谢大卫。我可以稍微清理一下，但我需要知道是否需要在每个子菜单中添加一个。单击功能？里面有不少。是否有一种方法可以将函数单独写入目标子菜单，或者我是否需要向每个子菜单添加ID，以便用一个简单的例程将它们作为目标？很抱歉这里有这么多额外的代码，我只是粘贴了所有我必须确保它工作的东西，这样你就可以看到最终的结果了。

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