如何仅切换* next *&隐藏其他班级 [英] How to toggle only the *next* & hide other class
本文介绍了如何仅切换* next *&隐藏其他班级的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在可折叠jquery中遇到了一些问题.
i have some problem in collapsable jquery.
我的HTML元素就是这样
My HTML elements are like this
<div id="first" class="collapse-container">
<h1 class="collapse">
<span class="arrow-r"></span>First Heading</h1>
<div class="accordion-active">
<p>First Section</p>
<p>First Section</p><p>First Section</p>
</div>
<h1 class="collapse"><span class="arrow-r"></span>Second Heading</h1>
<div class="accordion-active">
<p>Second Section</p>
<p>Second Section</p>
</div>
<h1 class="collapse"><span class="arrow-r"></span>Third Heading</h1>
<div class="accordion-active">
<p>Third Section</p>
<p>Second Section</p>
</div>
</div>
我正在使用这个jquery来切换类
I am using this jquery for toggle class
$(document).ready(function () {
$(".collapse").click(function () {
$(this).toggleClass("active");
});
});
jQuery(document).ready(function() {
jQuery(".accordion-active").hide();
//toggle the componenet with class msg_body
jQuery(".collapse").click(function()
{
jQuery(this).next(".accordion-active").slideToggle(0);
});
});
现在是我的问题,当我单击第一个h1标签时,它仅显示其elements.没关系. 但是现在,当我单击2nd h1标签时,它会显示其元素,但第一个H1标签仍处于打开状态.
Now my problem, when i clicks on first h1 tag it only shows its elements.thats fine. But now when i click on 2nd h1 tag it shows its elements, BUT FIRST H1 TAG IS STILL OPEN.
当一个(下一个类)处于活动状态时,如何设置所有其他的隐藏?
How can i set all others hide, while one (next class) is active?
谢谢
推荐答案
尝试一下.
$(".accordion-active").hide();
//toggle the componenet with class msg_body
$(".collapse").click(function(){
var $this = $(this); // Cacheing $(this)
$('.accordion-active').slideUp();
if( !$this.next(".accordion-active").is('.open') ){
//$('h1').removeClass('active');
$('.accordion-active').removeClass('open');
$this.addClass("active").siblings("h1").removeClass("active");
$this.next(".accordion-active").addClass('open').slideDown();
} else {
$("h1").removeClass("active");
$this.next(".accordion-active").removeClass('open').slideUp();
}
});
这篇关于如何仅切换* next *&隐藏其他班级的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文