本文介绍了使用jquery切换.active类的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图用jquery切换class
在 initEvents 函数中，您可以查找并删除按钮上的所有活动类，不包括点击的按钮。这应该给你你想要的功能。
initEvents：function（）{
var obj = this;
$ b obj.dd.on（'click'，function（event）{
$（'。active'）。not（$（this））。removeClass（'active'）;
$（this）.toggleClass（'active'）;
event.stopPropagation（）;
}）;
}
I'm trying to toggle the class .active with jquery, heres what I've got so far:
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
.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
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 desktop button the dropdown list appears, then when I click on the phone button, I want the desktop list 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 dd elements:
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.
解决方案
In your initEvents function 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 : function() {
var obj = this;
obj.dd.on('click', function(event){
$('.active').not($(this)).removeClass('active');
$(this).toggleClass('active');
event.stopPropagation();
});
}
这篇关于使用jquery切换.active类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！