4

次のコードがあります。

(function ($) {
    $(document).ready(function () {
        $(".clicker_class").click(function () {
            $('.show_menu_users').show();
        });
    });
})(jQuery);

$('.clicker_class').click(function (e) {
    e.stopPropagation();
});

私はJQueryが初めてで、少し戸惑っています。show 関数を簡単に使用できましたが、ユーザーが .clicker_class を再度クリックしたとき、およびユーザーが何か他のものをクリックしたときに、close または hide 関数を使用してメニューを閉じる必要があります。e.stopPropogation(); を使用してみました。しかし、うまくいきませんでした。上記のコードを指定してそれを行うにはどうすればよいですか?

アップデート：

I got it to close if a user clicks elsewhere using this:

$(document).mouseup(function (e)
{
    var container = $(".clicker_class");

    if (container.has(e.target).length === 0)
    {
         $(".show_menu_users").hide();
    }
});

質問：

ここで、ユーザーが .clicker_class をクリックしたときにメニューを閉じる必要があります。どうすれば今それを行うことができますか?

4

4 に答える 4

4

Cfs の解決策は機能しますが、グローバル変数に基づいていない (回避する方が良い) より簡単な方法があります。

jQuery の ".toggle()" 関数 (パラメーターなし) は、要素が表示されている場合は非表示にし、表示されていない場合は表示します。次に、ボタンをクリックしたときに $( ".show_menu_users" ).toggle() を起動し、ドキュメントをクリックしたときにメニューを非表示にするだけです。問題は、任意の要素をクリックするとメニューが閉じられることです。これを防ぐには、「event.stopPropagation()」を使用してイベントの伝播を停止する必要があります。

$( document ).ready( function () {
    $( ".clicker_class" ).on( "click", function ( event ) {
        event.stopPropagation(); 

       $( ".show_menu_users" ).toggle(); 
    });

    $( document ).on( "click", function () {
        $( ".show_menu_users" ).hide(); 
    }); 

    $( ".show_menu_users" ).on( "click", function ( event ) {
        event.stopPropagation(); 
    }); 
});

作業例はこちら

于 2013-05-29T20:26:16.637 に答える
3

clicker_class要素の外側をクリックするとメニューを閉じるように更新されました。

show_menu_usersブール値を使用しての状態を追跡できます。clicker_class要素をクリックすると、メニューが切り替わり、ブール値が更新されます。ドキュメント内の他の場所をクリックすると、メニューが閉じます。

(function ($) {
    $(document).ready(function () {
        var isShowing = false;

        var toggleMenu = function() {
            isShowing = !isShowing; //change boolean to reflect state change
            $('.show_menu_users').toggle(isShowing); //show or hide element
        }

        $(document).on('click', function (e) {
            if($(e.target).is('.clicker_class') || $(".clicker_class").has(e.target).length !== 0) {
                toggleMenu();
            } else {
                isShowing = false;
                $('.show_menu_users').hide();  
            }
        });
    });
})(jQuery);

ここでの作業例。

于 2013-05-29T19:26:44.220 に答える
2

ニーズに合っているかどうかを確認してください:

$(function(){
    //we set a tabindex attribute in case of this element doesn't support natively focus
    //outline just for styling
    $(".clicker_class").prop('tabindex',-1).css({outline:0});
});

$(".clicker_class").click(function () {
     $('.show_menu_users').toggle();
}).on('focusout',function(){
    $(this).hide();
});
于 2013-05-29T19:25:10.357 に答える
0

私はこの方法を使用していますが、これはよりクリーンな答えだと思います。

body タグの開始/終了の直後/直前に HTML ページに追加します。

<div class="main-mask"></div>

次に、js ファイルで次のようにします。

(function() {

  'use strict';

  $(".sidenav-toggle").on( "click", function() {
      $("#sidenav").toggleClass("sidenav--open");
      $(".main-mask").toggleClass("main-mask-visible");
  });

  $(".main-mask").on( "click", function() {
      $("#sidenav").toggleClass("sidenav--open");
      $(".main-mask").toggleClass("main-mask-visible");
  });

})();

あなたのCSSで：

.main-mask {
    height: 100%;
    left: 0;
    opacity: 0.1;
    top: 0;
    visibility: hidden;
    width: 100%;
    z-index: 1;
    position: fixed;
}

このようにして、マスクはクリックアウェイとして機能します。イベントをバインド/バインド解除し、.main-maskクラスを他の要素と共に使用できます。欠点は、ページに追加する必要があることです。cssbody:after {content:''}を使用してその依存関係を削除できます。

于 2015-02-22T02:05:33.740 に答える