即使在菜单外单击，如何让 CSS 下拉菜单保持打开状态？答案

【问题标题】：how to get CSS drop down menus to stay open even when clicked outside the menu?即使在菜单外单击，如何让 CSS 下拉菜单保持打开状态？
【发布时间】：2016-02-03 23:16:38
【问题描述】：

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

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

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

任何人都可以让菜单仅在单击时显示并保持打开和“固定”，直到它们随后全部“取消固定”？理想情况下，我认为 jquery .toggle 方法会更好，但是这个菜单系统中有这么多的 UL 和 LI，我无法想象创建每一个的功能！有没有一种方法可以抽象出这样一个函数来简化代码，而不是最终得到一个庞大的函数列表？很想跟JS高手学习！！

【问题讨论】：

该代码的所有真的有必要吗？那里有很多不相关的 CSS 和 JS，使帮助成为一项更加艰巨的任务。你能把代码减少到只重现问题的代码吗？
一般来说，您可能希望： 1) 移除基于 CSS 的 :hover 效果； 2) 向菜单项添加 jQuery .click() 处理程序以切换子菜单。后面的部分应该只针对顶级项目，所以手动绑定每个事件并不可怕。但是，如果您想让它更像一种模式，您只需要为所有顶级菜单元素提供一个选择器，并且为每个顶级菜单元素提供一种方法来识别其子菜单元素。
我同意@David。您应该删除更多示例代码并将其提炼成一个菜单项，以及几个子菜单项。这将使我们更容易为您提供帮助。
谢谢大卫。我可以稍微清理一下，但我需要知道是否需要为每个子菜单添加 .click 功能？里面有不少。有没有办法编写一个函数来单独定位子菜单，或者我是否需要为每个子菜单添加 ID 以便用一个简单的例程来定位它们？很抱歉，里面有所有额外的代码，我只是粘贴了我必须确保它正常工作的所有内容，这样你就可以看到最终结果。

标签： javascript jquery css click

【解决方案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 上即可。

【讨论】：

【解决方案2】：

简单的部分是打开正确的并关闭其他的

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

更复杂的部分是当用户在任何菜单区域之外点击时标签应该关闭的位置，比如在主要内容上。

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

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

【讨论】：

【解决方案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;

});

【讨论】：