[英]How to toggle using JQuery
I have an accordion, and I'm able able to open on each click, but how can I close it back again? 我有一个手风琴,每次点击都可以打开,但是如何再次将其关闭?
HTML: HTML:
<ul class="accordion">
<li id="one" class="files">
<a href="#one">Calendar 1<span>10</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>1</span></a></li>
</ul>
</li>
<li id="two" class="mail">
<a href="#two">Calendar 2<span>20</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>2</span></a></li>
</ul>
</li>
<li id="three" class="cloud">
<a href="#three">Calendar 3<span>30</span></a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu<span>3</span></a></li>
</ul>
</li>
<li id="four" class="sign">
<a href="#four">Calendar 4</a>
<ul class="sub-menu">
<li><a href="#"><em>01</em>Sub Menu</a></li>
</ul>
</li>
</ul>
Javascript: Javascript:
$(document).ready(function() {
// Store variables
var accordion_head = $('.accordion > li > a'),
accordion_body = $('.accordion li > .sub-menu');
// Open the first tab on load
accordion_head.first().addClass('active').next().slideDown('normal');
// Click function
accordion_head.on('click', function(event) {
// Disable header links
event.preventDefault();
// Show and hide the tabs on click
if ($(this).attr('class') != 'active') {
$(this).next().stop(true,true).slideToggle('normal');
$(this).addClass('active');
}
});
});
Fiddle: http://jsfiddle.net/fuuLh494/ 小提琴: http : //jsfiddle.net/fuuLh494/
You dont need to explicitly check for active class occurence and then do add/remove decision of class. 您不需要显式检查活动类的发生,然后执行添加/删除类的决定。 You can achieve this with toggleClass
: 您可以使用toggleClass
实现此目的:
accordion_head.on('click', function(event) {
event.preventDefault();
$('.sub-menu').not($(this).next()).slideUp('normal').prev().removeClass('active');
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');
});
if ($(this).attr('class') != 'active'){
//accordion_body.slideUp('normal');
$(this).next().stop(true,true).slideToggle('normal');
//accordion_head.removeClass('active');
$(this).addClass('active');
} else {
$(this).next().stop(true,true).slideToggle('normal');
$(this).removeClass('active');
}
See the updated fiddle here: http://jsfiddle.net/9ev31v6w/ 请在此处查看更新的小提琴: http : //jsfiddle.net/9ev31v6w/
The best you can do with a tutorial is learn, and not copy&paste without read the code. 学习指南所能做的最好的事情就是学习,在没有阅读代码的情况下不要复制和粘贴。 It's as simple as this: 就这么简单:
http://jsfiddle.net/fuuLh494/1/ http://jsfiddle.net/fuuLh494/1/
I add else
statement at the end of the script: 我在脚本末尾添加了else
语句:
else {
$(this).next().stop(true,true).slideToggle('normal');
$(this).removeClass('active');
}
Replace all instances of addClass
with toggleClass
and remove the condition of if class is active. 用toggleClass
替换所有addClass
实例,并删除class是否处于活动状态的条件。
We are trying to remove the class when the class is already added using toggleClass()
and don't need any if condition block. 当我们已经使用toggleClass()
添加了类并且不需要任何if条件块时,我们正在尝试删除该类。
accordion_head.first().toggleClass('active').next().slideDown('normal'); // Changed
if ($(this).attr('class') != 'active') { } // Removed
$(this).toggleClass('active'); // Changed
You can remove the if
completely, and use both slideToggle
and toggleClass
: 您可以完全删除if
,并同时使用slideToggle
和toggleClass
:
$(this).next().stop(true,true).slideToggle('normal');
$(this).toggleClass('active');
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.