0

ユーザーが開いている状態以外でクリックしたときにドロップダウンメニューを非表示にしようとしています。メニューが開いているかどうかを判断するフラグisActiveを使用してから、ドキュメントにクリックイベントを追加して、開いている場合はメニューを非表示にし、伝播を停止しましたクリックするとメニューに表示されます。ただし、現在、ドロップダウン アンカー タグをクリックすると、ドキュメントのクリック イベントが発生します。誰でもこれを修正する方法をアドバイスできますか?

JS

//User profile share tooltip
        $('.btn-social-share').on('click', function(e){
            e.preventDefault();

                if( !isActive ){
                    $('.social-share-options').show();
                    isActive = true;
                } else {
                    $('.social-share-options').hide();
                    isActive = false;
                }

        });

        /* Anything that gets to the document
           will hide the dropdown */
        $(document).on('click', function(){
            if( isActive ){
                $('.social-share-options').hide();
                isActive = false;
            }
        });

        /* Clicks within the dropdown won't make
           it past the dropdown itself */
        $('.social-share-options').click(function(e){
          e.stopPropagation();
        });
4

2 に答える 2

1

クリックされたものがドロップダウン内にあるかどうかをチェックする条件を作成し、クリックされたものがドロップダウン内にない場合はドロップダウンを非表示にします。

$(document).on('click', function(e){
    if( isActive && $(e.target).closest('.social-share-options').length === 0 ){
        $('.social-share-options').removeClass('is-active');
        isActive = false;
    }
});
于 2013-02-19T11:55:19.263 に答える
1

私はそれをテストしていませんが、あなたが追加する必要があると思いますe.stopPropagation()、それはあなたのイベントが泡立つのを防ぐでしょう：

  $('.btn-social-share').on('click', function(e){
        e.preventDefault();
        e.stopPropagation();
        //...

http://api.jquery.com/event.stopPropagation/

于 2013-02-19T11:55:53.640 に答える