我有一些动态内容,比如新闻提要,每个元素都有一个下拉菜单。我可以切换我点击的确切元素的下拉菜单,当我点击窗口的外部或其他任何地方时,它会关闭菜单,这很好。但是当我单击另一个下拉元素时出现问题。先前单击的菜单不会关闭,而是停留在同一页面上。
我想说的是,当我单击多个下拉元素时,我将它们全部显示出来,只有在我单击元素外部时它才会关闭或消失。
例如,当我单击 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] 删除。
我来说两句