手风琴修复（jquery）答案

【问题标题】：accordion fix (jquery)手风琴修复（jquery）
【发布时间】：2010-08-23 18:15:09
【问题描述】：

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;
});

... 有效，但如果想让第二个手风琴部分在页面加载时处于活动状态怎么办？我要改变什么？

感谢您的帮助

【问题讨论】：

make the second accordion section active 究竟是什么意思？？

标签： jquery html css accordion

【解决方案1】：

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

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

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

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

我希望这会有所帮助！

【讨论】：

【解决方案2】：

您可以使用 (jQuery UI Accordion](http://docs.jquery.com/UI/Accordion) 而不是重新发明轮子。密切注意它的active 选项。然后您的代码将变得像这样简单

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

看一个例子here。

【讨论】：