javascript - Reseting Dropdown menu Jquery -

i'm trying make reusable dropdown menu using css/jquery : https://codepen.io/anon/pen/nxxxpg

can find way reset 'active' when clicking on blank space or html element? in advance !

heres code

$(document).ready(function(){         $('.drpd-ver > .label').on('click', function(){     	// check if active class there , remove if     		if($( ).hasclass( "active" )){     			$(this).removeclass('active');     		}     		else{     		// else remove other opened tabs , add needed 1     			$('.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 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;  }      /*  ul have display:none 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>

try event propagation

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

and

 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 there , remove if     		if($( ).hasclass( "active" )){     			$(this).removeclass('active');     		}     		else{     		// else remove other opened tabs , add needed 1     			$('.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 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;  }      /*  ul have display:none 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>