Javascript 下拉列表removeClass不工作
我在Jquery下拉列表中单击函数active时遇到问题。addClass工作正常,但removeClass工作不正常。我的问题是当我点击下拉列表时,这个下拉列表没有隐藏 以下是现场演示: 这是我的密码: HTML: Js:Javascript 下拉列表removeClass不工作,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我在Jquery下拉列表中单击函数active时遇到问题。addClass工作正常,但removeClass工作不正常。我的问题是当我点击下拉列表时,这个下拉列表没有隐藏 以下是现场演示: 这是我的密码: HTML: Js: Js您需要停止事件从内部链接元素a冒泡到div.wrapper-dropdown-3,否则隐藏后它会再次显示dropdown: obj.opts.on('click', function (e) { var opt = $(this); obj.val =
Js您需要停止事件从内部链接元素
a
冒泡到div.wrapper-dropdown-3
,否则隐藏后它会再次显示dropdown:
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
});
obj.opts.on('click',函数(e){
var opt=$(本);
obj.val=opt.text();
obj.index=opt.index();
对象占位符文本(obj.val);
e、 stopPropagation();//您拥有的另一个选项是在父项(obj.dd)上使用toggleClass('active')。通过这种方式,用户可以通过单击ul和li来关闭菜单。因为父项单击事件仍然激发,并在最后移除处理程序
我正准备发布那张so+1,因为我赢了。现在发布副本毫无意义
.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;
}
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');
});
});
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
});
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'));
});