javascript - 下拉列表 removeClass 不起作用

Question

我在使用 Jquery 下拉列表单击功能时遇到问题。 addClass 运行良好但 removeClass 不行。我的问题是当我点击下拉列表时，这个下拉列表没有隐藏。

这是现场演示:http://jsfiddle.net/wcbaxkdv/

这是我的代码:

HTML:

<div id="dd" class="wrapper-dropdown-3" tabindex="-1">
   <span>WHERE DO YOU WANT TO GO?</span>
   <ul class="dropdown">
      <li><a href="#">WHERE DO YOU WANT TO GO?</a></li>
      <li><a href="#">addClass OK</a></li>
      <li><a href="#">WHERE DO YOU WANT TO GO?</a></li>
      <li><a href="#">removeClass Problem</a></li>
      <li><a href="#">WHERE DO YOU WANT TO GO?</a></li>
      <li><a href="#">WHERE DO YOU WANT TO GO?</a></li>
   </ul>
</div>

CSS:

.wrapper-dropdown-3 {
  background: none repeat scroll 0 0 #f0f1f1;
  border: medium none;
  border-radius: 0;
  box-shadow: 0 1px 1px rgba(50, 50, 50, 0.1);
  color: #8aa8bd;
  cursor: pointer;
  font-family: 'Archer-Book';
  font-size: 13px;
  font-weight: normal;
  height: 45px;
  margin-left: 25px;
  margin-top: 25px;
  outline: medium none;
  padding-left: 10px;
  padding-top: 15px;
  position: relative;
  vertical-align: middle;
  width: 87%;
}
.wrapper-dropdown-3:after {
  border-color: #ef4156 transparent;
  border-style: solid;
  border-width: 6px 6px 0;
  content: "";
  height: 0;
  margin-top: -3px;
  position: absolute;
  right: 15px;
  top: 50%;
  width: 0;
}
.wrapper-dropdown-3 .dropdown {
  background: none repeat scroll 0 0 #f1f1f2;
  border: 1px solid rgba(0, 0, 0, 0.17);
  border-radius: inherit;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  font-weight: normal;
  left: 0;
  list-style: none outside none;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 140%;
  transition: all 0.5s ease-in 0s;
  z-index: 10;
}
.wrapper-dropdown-3 .dropdown:after {
  border-color: #f1f1f2 transparent;
  border-style: solid;
  border-width: 0 6px 6px;
  bottom: 100%;
  content: "";
  height: 0;
  position: absolute;
  right: 15px;
  width: 0;
}

.wrapper-dropdown-3 .dropdown:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    bottom: 100%;
    right: 13px;
    border-width: 0 8px 8px 8px;
    border-style: solid;
    border-color: rgba(0,0,0,0.1) transparent;    
}
.wrapper-dropdown-3 .dropdown li a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #8aa8bd;
    border-bottom: 1px solid #e6e8ea;
    box-shadow: inset 0 1px 0 rgba(255,255,255,1);
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.wrapper-dropdown-3 .dropdown li i {
    float: right;
    color: inherit;
}

.wrapper-dropdown-3 .dropdown li:first-of-type a {
    border-radius: 7px 7px 0 0;
}

.wrapper-dropdown-3 .dropdown li:last-of-type a {
    border: none;
    border-radius: 0 0 7px 7px;
}

/* Hover state */

.wrapper-dropdown-3 .dropdown li:hover a {
    background: #f3f8f8;
}

/* Active state */

.wrapper-dropdown-3.active .dropdown {
    opacity: 1;
    pointer-events: auto;
}

/* No CSS3 support */

.no-opacity       .wrapper-dropdown-3 .dropdown,
.no-pointerevents .wrapper-dropdown-3 .dropdown {
    display: none;
    opacity: 1; /* If opacity support but no pointer-events support */
    pointer-events: auto; /* If pointer-events support but no pointer-events support */
}

.no-opacity       .wrapper-dropdown-3.active .dropdown,
.no-pointerevents .wrapper-dropdown-3.active .dropdown {
    display: block;
}

Js:

function DropDown(el) {
    this.dd = el;
    this.placeholder = this.dd.children('span');
    this.opts = this.dd.find('ul.dropdown > li');
    this.val = '';
    this.index = -1;
    this.initEvents();
}
DropDown.prototype = {
    initEvents : function() {
        var obj = this;

        obj.dd.on('click', function(event){
            $(this).addClass('active');
            return false;
        });

        obj.opts.on('click',function(){
            var opt = $(this);
            obj.val = opt.text();
            obj.index = opt.index();
            obj.placeholder.text(obj.val);
        });
    },
    getValue : function() {
        return this.val;
    },
    getIndex : function() {
        return this.index;
    }
}

$(function() {

    var dd = new DropDown( $('#dd') );

    $('.wrapper-dropdown-3 .dropdown li a').on('click', function() {
        // all dropdowns
        $('.wrapper-dropdown-3').removeClass('active');
    });
});

Js

Answer 1

您需要阻止事件从内部链接元素 a 冒泡到 div.wrapper-dropdown-3，否则它会在隐藏后再次显示下拉列表:

obj.opts.on('click', function (e) {
    var opt = $(this);
    obj.val = opt.text();
    obj.index = opt.index();
    obj.placeholder.text(obj.val);
    e.stopPropagation();  // <---- add this line
});

演示:http://jsfiddle.net/wcbaxkdv/2/