2012-01-12 74 views
1

我有下面的手风琴,但是当一个项目打开时,如果你再次点击它,它将重新打开而不是关闭。自定义手风琴

我不确定适应下面的代码来达到此目的的最佳方法吗?

任何帮助或建议将是伟大的?

由于

$('.acc h2').click(function() { 
    $('.acc h2.open').nextUntil('h2').stop(true, true).slideToggle(); 
    $('.acc h2.open').removeClass('open'); 
    $(this).nextUntil('h2').stop(true, true).slideToggle(900); 
    $(this).toggleClass('open'); 
}); 

<div class="acc"> 

    <h2>1. Title 1</h2> 
    <div><p>text 1</p></div> 

    <h2>2. Title 2</h2> 
    <div><p>text 2</p></div> 

    <h2>3. Title 3</h2> 
    <div><p>text 3</p></div> 

</div><!--END acc--> 
+0

您是否希望独立开启或关闭,或一次只打开一个? – kwelch 2012-01-12 19:43:24

+0

一次打开。 – Jemes 2012-01-12 19:51:06

回答

2

解决方案:

$('.acc h2').next('div').hide(); 
$('.acc h2').click(function() { 
if($(this).next('div').is(':visible')) 
{ 
    $(this).next('div').slideUp();  
} 
else{ 
    $('.acc h2').next('div').slideUp(); 
    $(this).next('div').slideToggle(); 
}  
}); 

演示:

http://jsfiddle.net/5NAhV/1/

http://jsfiddle.net/5NAhV/2/

+0

感谢Mandeep的帮助,完美地工作。 – Jemes 2012-01-12 20:17:08

+0

乐意提供帮助。 – 2012-01-12 20:18:26