Question

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

如果单击其中一个按钮，它将获得一个theFunction()类（通过CSS中的兄弟选择器显示其下拉列表），并将其从菜单中的所有其他按钮中删除。
如果您点击打开的下拉窗口，则不会发生任何事情。
如果您点击任何下拉按钮和窗口的外部，is-active类将从拥有它的所有导航按钮中删除。

无论我尝试了哪种推荐解决方案，其中一个或多个都按预期停止工作。任何人都可以帮我搞清楚吗？

＆＃13;

is-active

＆＃13;

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

＆＃13;

此代码只是切换下拉列表。我尝试自动关闭功能是在不同的功能，但我不再拥有它们，因为它们都没有用 - 抱歉。

奖励问题：有没有办法将<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>关键字放入HTML数据属性？

Answer 1

您可以尝试使用另一个div，其宽度和高度均为100％。然后，将一个onClick事件添加到div中，从您的下拉列表中删除is-active类。

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

Answer 2

我真的不知道这是什么最佳做法，但你可以添加隐藏元素，它具有固定位置，没有不透明度和 z-index 就在下拉菜单下方。

该元素可以使用click处理程序删除活动类。

点击外面时关闭菜单

2 个答案: