如果打开了另一个下拉列表，我如何关闭下拉列表
如果打开了另一个下拉列表，我如何关闭下拉列表
提问于 2020-10-02 22:25:22
我有一些动态内容，比如新闻提要，每个元素都有一个下拉菜单。我可以切换我点击的元素的下拉菜单，当我点击窗口外部或其他地方时，它会关闭菜单，这很好用。但当我单击另一个dropdown元素时，问题就出现了。之前单击的菜单不会关闭，而是停留在同一页上。
我想说的是，当我单击多个dropdown元素时，它们都会显示出来，只有当我在元素之外单击时，它们才会关闭或消失。
例如，当我单击dropdown-1，然后单击dropdown-2时，它们都显示在同一个窗口中。如何在DropDown2打开时关闭DropDown1，而不是同时打开它们。
如何在单击时切换每个下拉列表。我无法将视频附加到这篇文章中，但我已经添加了一张图像来帮助澄清我的问题。
这是切换dropdown的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");
}
}
}
});回答 1
Stack Overflow用户
回答已采纳
发布于 2021-05-26 16:51:44
我已经能够解决这个问题了。
我所做的是隐藏所有可能可见的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');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64173235
复制相关文章
相似问题
腾讯云开发者
