如何關閉點擊菜單和用戶點擊時的菜單？

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

更新。如果點擊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); 

Working example here.

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

食物安全中心解決方案的作品，但還有一個更簡單的方法來做到這一點，沒有立足自己在一個全局變量（這是更好地避免）。

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

Working example here

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:''}刪除該依賴項。