Boyanov Boyanov - 25 days ago 7
CSS Question

Resetting Dropdown menu Jquery

I'm trying to make reusable dropdown menu using css/jquery :
https://codepen.io/anon/pen/NxXXPg

Can someone find a way to reset the 'active' when clicking on a blank
space or another html element?

heres is the code



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

Try to this Event Propagation

$('html').click(function() {
$('.drpd-ver > .label').removeClass('active');
});

and this

 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>