我刚刚创建了自己的 jquery 插件,并且有一个下拉菜单,可以在单击自身时切换“活动”类
我只想在单击元素外部或单击其他下拉列表时删除“活动”类
每个下拉菜单都有不同的标记,但具有相同的类,我通过调用以下命令通过 jquery 初始化了它们:
$('.dropdown').dropdown();
这个东西的外观与 Bootstrap 下拉菜单类似
这是我的代码:
<style>
.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;
}
</style>
<script>
(function($) {
$.fn.dropdown = function() {
var dropdown = this;
dropdown.find('button').click(function() {
$(this).parent('.dropdown').toggleClass('active');
});
}
})(jQuery);
</script>
<script>
$('.dropdown').dropdown();
</script>
<div class="dropdown">
<button>Open</button>
<div class="menu">
<div class="item">One</div>
<div class="item">Two</div>
<div class="item">Three</div>
<div class="item">Four</div>
<div class="item">Five</div>
</div>
</div>
<div class="dropdown">
<button>Open</button>
<ul class="menu">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div>
您可以首先关闭除单击的下拉列表之外的所有下拉列表,然后激活/打开当前单击的下拉列表:
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
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)