javascript - 重置下拉菜单 Jquery

Question

我正在尝试使用 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>

Answer 1

试试这个 Event Propagation

$('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>