我尝试使用css / jquery创建可重复使用的下拉菜单: https://codepen.io/anon/pen/NxXXPg
有人可以找到重置“活跃”的方法吗?点击空白时 空格或其他html元素?
继承人是代码
$(document).ready(function(){
$('.drpd-ver > .label').on('click', function(){
// Check if active class is there and remove it if it is
if($( this ).hasClass( "active" )){
$(this).removeClass('active');
}
else{
// else just remove all other opened tabs and add the needed one
$('.drpd-ver > .label').removeClass('active');
$(this).toggleClass('active');
}
});
// removing active class if clicked anywhere else ??
});

body{
background-color: lightblue;
}
.drpd-ver{
position: relative;
display: inline-block;
font-size: 16px;
color: #000;
margin-left:400px;
}
/* Click to expand button */
.drpd-ver label{
box-sizing: border-box;
display: inline-block;
width: 100%;
background-color: #FFF;
padding: 15px 20px;
cursor: pointer;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: .2s;
transition: .2s;
}
/* The ul will have display:none by default */
.drpd-ver ul{
position: absolute;
right: 0;
list-style: none;
text-align: left;
width: 200px;
z-index: 1;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
display: none;
background-color: #DADADA;
padding: 0;
}
.drpd-ver ul li{
padding: 15px;
background-color: #fff;
color: #656565;
font-weight: 600;
margin-bottom: 1px;
cursor: pointer;
}
.drpd-ver ul li:hover{
background-color: royalblue;
color: #FFF;
}
.drpd-ver ul li a{
color: inherit;
text-decoration: none;
}
/* Defining active states*/
.drpd-ver .label.active{
background-color: royalblue;
color:white;
}
.drpd-ver .label.active + ul{
display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="drpd-ver">
<span class="label">\/</span>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div>
&#13;
答案 0 :(得分:1)
您可以尝试以下方式:
$(document).bind('click', function(e) {
if(!$(e.target).is('.drpd-ver > .label')) {
// This is where you'd remove classes etc
}
});
答案 1 :(得分:1)
$('html').click(function() {
$('.drpd-ver > .label').removeClass('active');
});
和这个
event.stopPropagation();
$(document).ready(function(){
$('html').click(function() {
$('.drpd-ver > .label').removeClass('active');
});
$('.drpd-ver > .label').on('click', function(event){
event.stopPropagation();
// Check if active class is there and remove it if it is
if($( this ).hasClass( "active" )){
$(this).removeClass('active');
}
else{
// else just remove all other opened tabs and add the needed one
$('.drpd-ver > .label').removeClass('active');
$(this).toggleClass('active');
}
});
// removing active class if clicked anywhere else ??
});
body{
background-color: lightblue;
}
.drpd-ver{
position: relative;
display: inline-block;
font-size: 16px;
color: #000;
margin-left:400px;
}
/* Click to expand button */
.drpd-ver label{
box-sizing: border-box;
display: inline-block;
width: 100%;
background-color: #FFF;
padding: 15px 20px;
cursor: pointer;
text-align: center;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: .2s;
transition: .2s;
}
/* The ul will have display:none by default */
.drpd-ver ul{
position: absolute;
right: 0;
list-style: none;
text-align: left;
width: 200px;
z-index: 1;
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2);
display: none;
background-color: #DADADA;
padding: 0;
}
.drpd-ver ul li{
padding: 15px;
background-color: #fff;
color: #656565;
font-weight: 600;
margin-bottom: 1px;
cursor: pointer;
}
.drpd-ver ul li:hover{
background-color: royalblue;
color: #FFF;
}
.drpd-ver ul li a{
color: inherit;
text-decoration: none;
}
/* Defining active states*/
.drpd-ver .label.active{
background-color: royalblue;
color:white;
}
.drpd-ver .label.active + ul{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="drpd-ver">
<span class="label">\/</span>
<ul>
<li><a href="#">Link One</a></li>
<li><a href="#">Link Two</a></li>
<li><a href="#">Link Three</a></li>
<li><a href="#">Link Four</a></li>
</ul>
</div>
答案 2 :(得分:1)
尝试在点击HTML时删除活动类。请尝试以下代码。
$(document).ready(function(){
$('html').click(function() {
$('.drpd-ver > .label').removeClass('active');
});
$('.drpd-ver > .label').on('click', function(event){
if($( this ).hasClass( "active" )){
$(this).removeClass('active');
}
else{
$('.drpd-ver > .label').removeClass('active');
$(this).toggleClass('active');
}
});
});
答案 3 :(得分:0)
if ($(this).hasClass("active")) {
$(this).removeClass('active');
} else {
// else just remove all other opened tabs and add the needed one
$('.drpd-ver > .label').removeClass('active');
$(this).toggleClass('active');
$(document).off('click').on('click', function() {
$('.drpd-ver > .label').removeClass('active');
});
return false;
}
您可以使用私有变量,以便不关闭/打开点击事件。