单击外部时关闭菜单[重复]答案

【问题标题】：Close menus when clicking outside [duplicate]单击外部时关闭菜单[重复]
【发布时间】：2018-04-28 13:11:16
【问题描述】：

我正在为网站制作导航栏。它包含 3 个下拉列表（以及我删除的一堆其他内容以保持代码简洁）。我希望能够通过在下拉菜单之外单击来关闭它们。我找到了很多解决这个问题的解决方案（包括本网站上的解决方案），但所有这些解决方案都只考虑了一个这样的下拉菜单，我无法让它们适应我的情况。我想要实现的是：

如果您单击其中一个按钮，它将获得一个 is-active 类（通过 CSS 中的同级选择器使其下拉可见）并将其从菜单中的所有其他按钮中删除。
如果您单击打开的下拉窗口，则不会发生任何事情。
如果您在任何下拉按钮和窗口之外单击，is-active 类将从所有具有它的导航按钮中删除。

无论我尝试了哪种推荐的解决方案，其中一个或多个都按预期停止工作。谁能帮我弄清楚？

$('[data-toggle]').click(function() {
    var params = $(this).data('toggle');
    $(params['target']).toggleClass(params['class']);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="main-nav__inner" style="height: 100%;">
        <div class="main-nav__group d-none d-md-block">
            <button class="main-nav__button" data-toggle='{"target":"[data-toggle-target=\"books\"","class":"is-active"}' data-toggle-target="books">Knihy</button>
            <div class="main-nav__dropdown">
                // Dropdown contents
            </div>
        </div>
        <div class="main-nav__group d-none d-md-block">
            <button class="main-nav__button" data-toggle='{"target":"[data-toggle-target=\"info\"","class":"is-active"}' data-toggle-target="info">Informácie</button>
            <div class="main-nav__dropdown">
                // Dropdown contents        
            </div>
        </div>
        <div class="main-nav__group main-nav__group--popup">
            <button class="main-nav__button" data-toggle='{"target":"[data-toggle-target=\"profile\"","class":"is-active"}' data-toggle-target="profile">
                <i class="icon-left fa fa-user" aria-hidden="true"></i>
            </button>
            <div class="main-nav__popup">
                // Dropdown contents
            </div>
        </div>
    </div>

此代码只是切换下拉菜单。我尝试自动关闭功能是在单独的函数中，但我不再拥有它们，因为它们都不起作用 - 抱歉。

一个额外的问题：有没有办法将 self 关键字放入 HTML 数据属性中？

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

您可以尝试使用另一个具有 100% 宽度和高度的 div。然后，向 div 添加一个 onClick 事件，从下拉列表中删除 is-active 类。

只需确保 div 的 z-index 低于菜单，这样它就不会超出菜单。

【讨论】：

【解决方案2】：

我真的不知道最好的做法是什么，但是您可以添加具有 fixed 位置、没有 opacity 和 z 的隐藏元素-index 就在下拉菜单的下方。

该元素可能具有点击处理程序来删除您的活动类。

【讨论】：