Question

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

这是我的代码：

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/

Answer 2

您拥有的另一个选项是在父项（obj.dd）上使用toggleClass（'active'）。这样使用可以通过点击ul和li来关闭菜单。由于父点击事件仍然会触发并在最后删除处理程序。

http://jsfiddle.net/cv5jahd8/

    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).toggleClass('active');
                return false;
            });

            obj.opts.on('click', function (e) {
                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'));

    });

下拉列表removeClass无法正常工作

2 个答案:

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