Question

我尝试使用css / jquery创建可重复使用的下拉菜单： https://codepen.io/anon/pen/NxXXPg

有人可以找到重置“活跃”的方法吗？点击空白时空格或其他html元素？

继承人是代码

＆＃13;

$(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 ??

});

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以尝试以下方式：

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

Answer 2

尝试 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>

Answer 3

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

Answer 4

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

您可以使用私有变量，以便不关闭/打开点击事件。

重置下拉菜单Jquery

4 个答案: