如果另一个下拉菜单打开,我如何关闭下拉菜单

自由的灵魂

我有一些动态内容,比如新闻提要,每个元素都有一个下拉菜单。我可以切换我点击的确切元素的下拉菜单,当我点击窗口的外部或其他任何地方时,它会关闭菜单,这很好。但是当我单击另一个下拉元素时出现问题。先前单击的菜单不会关闭,而是停留在同一页面上。

我想说的是,当我单击多个下拉元素时,我将它们全部显示出来,只有在我单击元素外部时它才会关闭或消失。

例如,当我单击 dropdown-1,然后单击 dropdown-2 时,它们都显示在同一个窗口中。如何在下拉列表 2 打开时关闭下拉列表 1,而不是同时打开它们。

单击时如何切换每个下拉列表。我无法在这篇文章中附加视频,但我添加了一张图片来帮助澄清我的问题。

在此处输入图片说明

这是我用于切换下拉列表的 JQuery 代码示例。

/* toggle dropdown options */
$(document).on("click", ".dropdown-toggle", function (e) {
 e.stopPropagation();
 $(this).siblings().toggleClass('show');
});

/* // Close the dropdown if the user clicks outside of it */
$(window).click(function (e) {
 if (!e.target.matches('.dropbtn') ) {
    var dropdowns = $('.dropdown-content');
    var i;
    for (i = 0; i < dropdowns.length; i++) {
        var openDropdown = dropdowns[i];
        if ($(openDropdown).hasClass("show") ) {
            $(openDropdown).removeClass("show");
        }
    }
 }

});
自由的灵魂

我已经能够解决这个问题。

我所做的是隐藏所有可能可见的 div,然后切换我单击的下拉列表以显示其内容。

$(document).on("click", ".dropdown-toggle", function (e) {
        e.stopPropagation();

        // hide all dropdown that may be visible
        var i;
        var dropdowns = $('.dropdown-content');
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if ($(openDropdown).hasClass("show")) {
                $(openDropdown).removeClass("show");
            }
        }
        
        // toggle the dropdown 
        $(this).siblings().toggleClass('show');
    });

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

在另一个下拉菜单中选择选项时显示下拉菜单

如何基于另一个下拉菜单更改下拉菜单值

禁用p下拉菜单,具体取决于选择另一个p下拉菜单PrimeNG

如何使下拉菜单打开下拉菜单?

根据另一个下拉菜单选择过滤下拉菜单

CSS在下拉菜单中有另一个下拉菜单

当我通过另一个下拉菜单悬停时,出现下拉菜单的子菜单

WordPress下拉菜单重叠-悬停一个可打开另一个

打开另一个时如何关闭相邻的下拉菜单

来自另一个下拉菜单的国际电话输入更改下拉菜单拨号代码

下拉菜单打开/关闭

多个下拉菜单,即使我单击另一个下拉菜单,也只有一个可用

关闭下拉菜单,同时在引导程序中打开另一个菜单

CSS下拉菜单打开:悬停

使自动完成工作在下拉菜单上,并使其填充另一个下拉菜单的内容

当用户打开一个下拉菜单时关闭其他下拉菜单

根据另一个下拉菜单更改下拉菜单

单击另一个下拉菜单时,下拉菜单中缺少离子选择的项目

根据另一个下拉菜单的选定值,过滤并显示一个下拉菜单的选项

jQuery-在外部单击或单击另一个下拉菜单时,关闭下拉菜单/删除活动类

根据使用Javascript在另一个下拉菜单中选择的内容来设置下拉菜单值

我有两个下拉菜单,如果更改下拉菜单的值,它将影响另一个下拉菜单

选择另一个时关闭下拉菜单

打开另一个时导航下拉菜单不会关闭

当下拉菜单在另一个组合框上关闭时,如何更新 WPF 组合框?

单击另一个关闭下拉菜单

如果单击另一个下拉菜单,如何使下拉菜单自动关闭?

打开一个下拉菜单,用 JavaScript 关闭另一个

当另一个下拉菜单打开时隐藏侧面菜单中的一个下拉菜单