Question

我有一个非常基本的手风琴式（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”+相应的数字。我的问题是我怎么能这样做，当点击一个新项目时，它会关闭前一个项目？

Answer 1

跟踪哪一个打开。

(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(...)替换为其等效的vanilla JS等等。

Answer 2

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

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

同样.listitem+div表示选择所有带有listitem类

的元素后面的div

Jquery手风琴式内容切换

2 个答案: