2

我有一个非常基本的手风琴式 (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>

所有列表项的 id 为 1-6 或其他数字，隐藏内容的 id 为“info”+相应的数字。我的问题是我怎样才能做到这一点，当点击一个新项目时，它会关闭前一个项目？

4

2 回答 2

0

跟踪哪个是打开的。

(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>

请注意，我已将您的id属性替换为data-page，因为在 HTML4 中，拥有以数字开头的 ID 是无效的，并且无论如何都不恰当地使用 ID。此外，$(this).attr(...)为了提高效率，我将其替换为等效的香草 JS。

于 2012-12-08T20:04:12.733 回答
0 
$(".listitem").click(function(){
         var content=$(this).next();
        $('.listitem+div:visible').slideToggle("fast",function(){
                content.slideToggle("fast");
              });
        });

这里的技巧是:visible在 jQuery 中使用选择器；它只选择与前一个选择器匹配的可见元素，一旦所有可见内容都被隐藏，刚刚单击的内容将打开

也.listitem+div意味着选择 listitem 类的所有元素之后的 div

于 2012-12-08T20:09:55.670 回答