javascript 使用 jquery 切换 .active 类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20590181/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Toggle .active class with jquery
提问by vephelp
I'm trying to toggle the class .activewith jquery, heres what I've got so far:
我正在尝试.active使用 jquery切换类，这是我到目前为止所得到的：
html
html
<div class="downloadButtons">
<div class="download-button-wrapper">
<div id="dd" class="desktopBackground downloadFontIcons" tabindex="1">DESKTOP
<ul class="dropdown">
<li><a href="#">2560 x 1440</a></li>
<li><a href="#">1800 x 900</a></li>
</ul>
</div>
</div>
<div class="download-button-wrapper">
<div id="de" class="tabletBackground downloadFontIcons" tabindex="1">PHONE
<ul class="dropdown">
<li><a href="#">640 x 960</a></li>
<li><a href="#">1136 x 640</a></li>
<li><a href="#">720 x 1280</a></li>
</ul>
</div>
</div>
<div class="download-button-wrapper">
<div id="df" class="phoneBackground downloadFontIcons" tabindex="1">TABLET
<ul class="dropdown">
<li><a href="#">2560 x 1600</a></li>
<li><a href="#">2048 x 1536</a></li>
</ul>
</div>
</div>
<div style="clear:both"></div>
</div>
css
css
.downloadButtons{
display: block;
width: 780px;
height: 200px;
margin-left: 40px;
margin-top: 30px;
}
/* GLOBALS - Dropdowns*/
.downloadFontIcons{
/* Size and position */
position: relative; /* Enable absolute positionning for children and pseudo elements */
width: 184px;
height: 44px;
margin: 0 auto;
text-align: center;
line-height: 44px;
margin-right: 68px;
font-size: .7em;
color: #9ea7b3;
background-color: #F9FAFC;
cursor: pointer;
outline: none;
border: 1px solid #eaedf1;
}
.downloadFontIcons .dropdown{
/* Size & position */
position: absolute;
top: 110%;
left: 0px;
right: 0px;
/* Styles */
background: white;
-webkit-transition: all 0.3s ease-out;
-webkit-transition-delay: 0s;
-moz-transition: all 0.3s ease-out;
-moz-transition-delay: 0s;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-o-transition-delay: 0s;
transition: all 0.3s ease-out;
transition-delay: 0s;
list-style: none;
/* Hiding */
opacity: 0;
pointer-events: none;
}
::selection {
background: transparent;
}
::-moz-selection {
background: transparent;
}
.download-button-wrapper {
*zoom: 1;
float: left;
}
.downloadFontIcons .dropdown li a {
display: block;
height: 44px;
text-decoration: none;
color: #9ea7b3;
-webkit-transition: all 0.3s ease-out;
-webkit-transition-delay: 0s;
-moz-transition: all 0.3s ease-out;
-moz-transition-delay: 0s;
-ms-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
-o-transition-delay: 0s;
transition: all 0.3s ease-out;
transition-delay: 0s;
}
/* Hover state */
.downloadFontIcons .dropdown li:hover a {
color: #FFFFFF;
background-color:#FF562A;
}
/* Active state */
.downloadFontIcons.active .dropdown {
opacity: 1;
pointer-events: auto;
}
/* No CSS3 support */
.no-opacity .downloadFontIcons .dropdown,
.no-pointerevents .downloadFontIcons .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 .downloadFontIcons.active .dropdown,
.no-pointerevents .downloadFontIcons.active .dropdown {
display: block;
}
js
js
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd = new DropDown( $('#dd') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-2').removeClass('active');
});
});
$(function() {
var de = new DropDown( $('#de') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-2').removeClass('active');
});
});
$(function() {
var df = new DropDown( $('#df') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-2').removeClass('active');
});
});
I need to toggle the active state of the buttons, for example as I click on the desktopbutton the dropdown list appears, then when I click on the phonebutton, I want the desktoplist to disappear. I think the changes needed to be on this part of the code as with this code I think I'm only targeting ddelements:
我需要切换按钮的活动状态，例如desktop，当我单击phone按钮时会出现下拉列表，然后当我单击按钮时，我希望desktop列表消失。我认为需要在代码的这一部分进行更改，与此代码一样，我认为我仅针对dd元素：
function DropDown(el) {
this.dd = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
I have very little knowledge of javascript so not sure what do to. Need your help.
我对 javascript 知之甚少，所以不确定该怎么做。需要你的帮助。
回答by Trevor
In your initEventsfunction you can look for and remove all active classes on your buttons excluding the clicked button. That should give you the functionality your looking for.
在您的initEvents函数中，您可以查找并删除按钮上的所有活动类，但单击的按钮除外。这应该为您提供所需的功能。
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$('.active').not($(this)).removeClass('active');
$(this).toggleClass('active');
event.stopPropagation();
});
}
