我正试图用jquery切换班级.active
,这是我到目前为止所得到的:
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');
});
});
我需要切换按钮的活动状态,例如当我点击desktop
按钮时会出现下拉列表,然后当我点击phone
按钮时,我想要{{ 1}}列表消失。我认为需要对代码的这一部分进行更改,因为此代码我认为我只定位desktop
元素:
dd
我对javascript知之甚少,所以不知道该做什么。需要你的帮助。
答案 0 :(得分:5)
在initEvents
功能中,您可以查找并删除按钮上的所有活动类,不包括单击的按钮。这应该为您提供所需的功能。
initEvents : function() {
var obj = this;
obj.dd.on('click', function(event){
$('.active').not($(this)).removeClass('active');
$(this).toggleClass('active');
event.stopPropagation();
});
}