重置下拉菜单Jquery的

Question

我试图使可重复使用的下拉菜单中使用CSS/jQuery的： https://codepen.io/anon/pen/NxXXPg

有人能找到一种方法上的空白 空间或另一个HTML元素，当点击重置“活跃”？

继承人是代码

$(document).ready(function(){ 
 

 

 
    $('.drpd-ver > .label').on('click', function(){ 
 
    \t // Check if active class is there and remove it if it is 
 
    \t \t if($(this).hasClass("active")){ 
 
    \t \t \t $(this).removeClass('active'); 
 
    \t \t } 
 
    \t \t else{ 
 
    \t \t // else just remove all other opened tabs and add the needed one 
 
    \t \t \t $('.drpd-ver > .label').removeClass('active'); 
 
    \t \t \t $(this).toggleClass('active'); 
 
    \t \t } \t \t 
 
    }); 
 
    
 
    // 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(); 
 
    \t // Check if active class is there and remove it if it is 
 
    \t \t if($(this).hasClass("active")){ 
 
    \t \t \t $(this).removeClass('active'); 
 
    \t \t } 
 
    \t \t else{ 
 
    \t \t // else just remove all other opened tabs and add the needed one 
 
    \t \t \t $('.drpd-ver > .label').removeClass('active'); 
 
    \t \t \t $(this).toggleClass('active'); 
 
    \t \t } \t \t 
 
    }); 
 
    
 
    // 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 2

你可以尝试这样的：

$(document).bind('click', function(e) { 
    if(!$(e.target).is('.drpd-ver > .label')) { 
    // This is where you'd remove classes etc 
    } 
}); 

Answer 3

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; 
    } 

您可以使用以私有变量不关闭/打开Click事件。

Answer 4

尝试删除点击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'); 
     }   
    }); 
});