Question

HTML

<h2 class="sec-title">one</h2>
<div class="sec-content">content 1</div>
<h2 class="sec-title">two</h2>
<div class="sec-content">content 2</div>

jQuery的：

$('.sec-content').hide();
$('.sec-title:first').addClass('active').next().show();

$('.sec-title').click(function(){
 if( $(this).next().is(':hidden') ) { 
  $('.sec-title').removeClass('active').next().slideUp();
  $(this).toggleClass('active').next().slideDown(); 
 }
 return false;
});

...但是如果想让第二个手风琴部分在页面加载上活动会怎么样？我该怎么改变？

感谢您的帮助

Answer 1

您可以使用（jQuery UI Accordion）（http://docs.jquery.com/UI/Accordion）而不是重新发明轮子。密切注意其active选项。然后您的代码将简化为

$(document).ready(function() {
    $("#accordion").accordion({ active: 1 });
});

查看示例here。

Answer 2

尝试将您选择第一个sec-title类元素的行更改为：

$('.sec-title:eq(1)').addClass('active').next().show();

以下是:eq选择器的API documentation。我认为它会做你想要的。它将选择与选择器匹配的第n个元素。请注意，eq()从0开始 - 因此:eq(1)正在选择具有sec-title类的第二项。

这是我的小提琴，说明了这一点：http://jsfiddle.net/7KdGn/1/

我希望这有帮助！

手风琴修复（jquery）

2 个答案: