Jquery – 单击外部或单击另一个下拉列表时关闭下拉列表/删除活动类
我刚刚创建了自己的jquery插件，并且我有一个下拉列表，可以在单击时切换“活动”类
我只想在单击元素外部或单击其他下拉列表时删除’active’类，并且每个下拉列表都有不同的标记，但是使用相同的类，我通过调用以下方法通过jquery初始化它们：
$('.dropdown').dropdown(); 这个东西有类似Bootstrap下拉的外观
这是我的代码：
.dropdown { position:relative; display:inline-block; } .dropdown > button { padding:6px 12px; border-radius:4px; border:1px solid #bbb; background:linear-gradient(#fff 5% , #ddd 100%); } .dropdown.active > button, .dropdown > button:active { background:#ddd; box-shadow:inset 0px 3px 6px rgba(0,0,0, 0.125); } .dropdown > ul { margin:0; list-style:none; padding:0; } .dropdown > .menu { border:1px solid #ddd; border-radius:4px; position:fixed; top:65px; display:none; } .dropdown > .menu li , .dropdown > .menu .item { padding:6px 12px; min-width:100px; font-weight:bold; } .dropdown.active > .menu { -webkit-transform:none; display:inline-block; } (function($) { $.fn.dropdown = function() { var dropdown = this; dropdown.find('button').click(function() { $(this).parent('.dropdown').toggleClass('active'); }); } })(jQuery); $('.dropdown').dropdown();
您可以先关闭所有下拉，然后点击一个，然后激活/打开当前点击下拉菜单：
var p = $(this).parent(); $('.dropdown').not(p).removeClass('active');
在外面点击时关闭下拉菜单：
$(window).click(function() { $('.dropdown').removeClass('active'); });
并通过以上代码防止包含下拉：
$('.dropdown').click(function(event){ event.stopPropagation(); });
这是一个演示： https ： //jsfiddle.net/huvzb305/3