重置下拉菜单 Jquery

Question

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

有人能找到一种方法来在单击空白时重置 'active' space 或另一个 html 元素？

这是代码

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

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

您可以使用私有变量来避免off/on点击事件。

Answer 4

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

重置下拉菜单 Jquery

Resetting Dropdown menu Jquery

javascript

jquery

html

css

dropdown