1

現在、非表示の div を非表示/表示する特定のリンクを含むリストがあります。リンクがクリックされると、クラス「アクティブ」が削除されて追加され、非表示の div がチェックされて、それが表示されているか非表示になっているか、それに応じて非表示/表示されているかが確認されます。これで問題なく動作しますが、1 つ問題があります。Squareをクリックすると#squareを表示したいのですが、もう一度クリックすると#squareを非表示にしたいのですが、.activeをチェックしているため、これを行うことはできません。これを達成できるようにコードを更新する方法について、誰か提案を提供できますか?

JS

$(document).ready(function(){

    var square = $('#square'),
        test = $('#test');

    square.hide();

    test.find('a').on('click', function(e){

        if( !$(this).hasClass('active') ){


            if ( square.is(':visible') ){
              square.hide();
            }

            var id = $(this).data('id');

            test.find('a').removeClass('active');
            $(this).addClass('active');

            if( id === 'square' ){
              square.show();
            }

        }

        e.preventDefault();
    });        

});​

HTML

<ul id="test">
<li><a href="#">Triangle</a></li>
<li><a href="#" data-id="square">Square</a></li>
<li><a href="#">Circle</a></li>
</ul>

<div id="square"></div>​

フィドル: http://jsfiddle.net/xBuUY/

4

3 に答える 3

1

クラスに関係なくトグルしたいので、クラステストの外でトグルsquareを削除しました。squareここでこのフィドルを試してください

于 2012-05-23T21:00:53.337 に答える
1

このコード ブロックを移動します -- if ( square.is(':visible') ){ square.hide(); hasClass('active') チェックの外側。

于 2012-05-23T20:58:19.317 に答える
1

私はあなたのフィドルのフォークを作りました。どのリンクがアクティブであるべきかをチェックする以外に、正方形が表示されるかどうかをテストするためにブロックを移動しました。は#square切り替えられ、すでにアクティブなときに非表示になっている保証が表示されるだけではありません。Fiddle をテストするだけです。

それとは別に、イベント ハンドラーを最適化しました。各リンクのリンク ハンドラーよりも高速な委任を使用するようになりました。リンクのバブリングは によって防止されe.stopPropagation()ます。パフォーマンス上の理由から、他のメソッドまたは何かが呼び出される前にこれを追加しました。

于 2012-05-23T21:05:06.813 に答える