Looking for a way to create a reusable dropdown menu using css/jquery? Check out this codepen: https://codepen.io/anon/pen/NxXXPg
Is there a method to reset the 'active' status when clicking on a blank space or another html element?
Here's the code snippet:
$(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>