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>

すべてのリスト項目には 1 ～ 6 などの数字の ID があり、非表示のコンテンツには「info」+ 対応する数字の ID があります。私の質問は、新しいアイテムがクリックされたときに前のアイテムを閉じるようにするにはどうすればよいですか?

4

2 に答える 2

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 に答える
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 に答える