如何點擊菜單並在用戶點擊時關閉菜單？

Question

我有以下代碼：

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

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

我是JQuery的新手並且有點困惑。 我很容易就能使用show函數，但是當用戶再次單擊.clicker_class並且當用戶點擊其他內容時，我需要使用關閉或隱藏功能來關閉菜單。 我嘗試使用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時關閉菜單。 我現在該怎么辦？

Answer 1

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(); 
    }); 
}); 

這里的工作示例

Answer 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();
});

Answer 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);

這里的工作示例。

Answer 4

我使用這種方法，我認為這是一個更清晰的答案。

在開始/結束正文標記之后/之前添加到您的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類與其他元素一起使用。 缺點是需要將其添加到頁面中。 您可以使用css body:after {content:''}刪除該依賴項。