当使用jQuery单击另一个下拉菜单按钮时,关闭活动的下拉菜单可以通过以下步骤实现:
.on()
,监听点击事件。.hasClass()
方法来判断。.siblings()
或.next()
,找到该按钮对应的下拉菜单元素。.hide()
或.slideUp()
,将下拉菜单隐藏起来。.removeClass()
方法,将活动状态的类名从下拉菜单按钮中移除。以下是一个示例代码:
$(".dropdown-btn").on("click", function() {
if ($(this).hasClass("active")) {
$(this).removeClass("active");
$(this).siblings(".dropdown-menu").hide();
} else {
$(".dropdown-btn").removeClass("active");
$(".dropdown-menu").hide();
$(this).addClass("active");
$(this).siblings(".dropdown-menu").show();
}
});
在这个示例代码中,我们假设下拉菜单按钮的活动状态通过添加和移除类名"active"来表示,下拉菜单元素使用类名".dropdown-menu"来选择。当点击一个下拉菜单按钮时,首先判断它是否处于活动状态,如果是,则隐藏对应的下拉菜单;如果不是,则先隐藏所有下拉菜单,再显示当前点击按钮对应的下拉菜单。
注意:以上代码仅为示例,实际情况中可能需要根据具体的HTML结构和样式进行相应的调整。
领取专属 10元无门槛券
手把手带您无忧上云