Jquery手风琴式内容切换

我有一个非常基本的手风琴，像(http://jqueryui.com/accordion/)内容显示系统。我在这方面是新手，而且很固执，所以我没有使用提供的那个。 代码如下：

        $(".listitem").click(function(){
            $("#info"+$(this).attr('id')).slideToggle("fast");
        });

<h3 class="listitem" id="1">title 1</h3>
<div id="info1">blah blah blah 1</div>

<h3 class="listitem" id="2">title 2</h3>
<div id="info2">blah blah blah 2</div>

$（“.listitem”）。单击（函数（）{
$（“#info”+$（this.attr（'id'））.slideToggle（“fast”）；
});
标题1
废话废话1
标题2
废话废话2

---

所有列表项的id都是数字1-6或其他数字，隐藏内容的id是“info”+相应的数字。我的问题是，我如何使它在单击新项目时关闭上一个项目

记录下哪一个是开放的

(function() {
    var open = -1;
    $(".listitem").click(function() {
        var id = this.getAttribute("data-page");
        if( id != open) {
            $("#info"+id+", #info"+open).slideToggle("fast");
            open = id;
        }
    });
})();

<h3 class="listitem" data-page="1">title 1</h3>
<div id="info1">blah blah blah 1</div>

<h3 class="listitem" data-page="2">title 2</h3>
<div id="info2">blah blah blah 2</div>

（函数（）{
开放变量=-1；
$（“.listitem”）。单击（函数（）{
var id=this.getAttribute（“数据页”）；
如果（id！=打开）{
$（“#info”+id+，#info”+open）；
open=id；
}
});
})();
标题1
废话废话1
标题2
废话废话2

请注意，我已将您的

id

属性替换为

数据页

，因为在HTML4中，id以数字开头是无效的，而且id的使用也不恰当。此外，为了提高效率，我将

$（this）.attr（…）

替换为与之等效的香草JS

$(".listitem").click(function(){
         var content=$(this).next();
        $('.listitem+div:visible').slideToggle("fast",function(){
                content.slideToggle("fast");
              });
        });

这里的技巧是在jQuery中使用

：visible

选择器；它只选择与上一个选择器匹配的可见元素，一旦所有可见内容都被隐藏，刚刚单击的内容将打开

另外，

.listitem+div

意味着选择listitem类中所有元素后面的div