[英]How do I close menu on click and when the user clicks away?
I have the following code: 我有以下代码:
(function ($) {
$(document).ready(function () {
$(".clicker_class").click(function () {
$('.show_menu_users').show();
});
});
})(jQuery);
$('.clicker_class').click(function (e) {
e.stopPropagation();
});
I am new to JQuery and a bit puzzled. 我是JQuery的新手并且有点困惑。 I was easily able to use the show function but I need to use the close or hide function to close the menu when the user clicks on .clicker_class again and when the user clicks away at something else.
我很容易就能使用show函数,但是当用户再次单击.clicker_class并且当用户点击其他内容时,我需要使用关闭或隐藏功能来关闭菜单。 I tried using the e.stopPropogation();
我尝试使用e.stopPropogation(); but didn't work.
但没有奏效。 How do I do that given my above code?
鉴于上述代码,我该怎么做?
Update: 更新:
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();
}
});
Question: 题:
Now I just need the menu to close when the user clicks on .clicker_class. 现在我只需要在用户点击.clicker_class时关闭菜单。 How can i do that now?
我现在该怎么办?
Cfs's solution works but there is an easier way to do that, without basing yourself on a global variable (which is better to avoid). Cfs的解决方案有效,但有一种更简单的方法可以做到这一点,而不是基于全局变量(最好避免)。
The ".toggle()" function (without parameters) of jQuery hide your element if it is visible and show it if it isn't. jQuery的“.toggle()”函数(不带参数)隐藏你的元素(如果它是可见的),如果不可见则显示它。 Then you just have to launch $( ".show_menu_users" ).toggle() when you click on the button and hide the menu when you click on the document.
然后,当您单击按钮并在单击文档时隐藏菜单时,您只需启动$(“。show_menu_users”).toggle()。 The problem is that clicking on any elements will close the menu, to prevent it you just have to stop the event propagation by using "event.stopPropagation()"
问题是单击任何元素将关闭菜单,以防止您只需使用“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();
});
});
See if its fit your needs: 看看它是否符合您的需求:
$(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();
});
UPDATED to close menu if clicked outside of clicker_class
elements. 如果在
clicker_class
元素之外单击,则更新为关闭菜单。
You can track the state of the show_menu_users
using a boolean. 您可以使用布尔值跟踪
show_menu_users
的状态。 When you click on the clicker_class
elements, toggle the menu and update the boolean. 单击
clicker_class
元素时,切换菜单并更新布尔值。 When you click elsewhere in teh document, close the menu. 当您单击文档中的其他位置时,请关闭菜单。
(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);
I use this method, which I think is a cleaner answer. 我使用这种方法,我认为这是一个更清晰的答案。
Add to your html page just after/before the opening/closing body tag: 在开始/结束正文标记之后/之前添加到您的html页面:
<div class="main-mask"></div>
Then in your js file: 然后在你的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");
});
})();
In your css: 在你的CSS中:
.main-mask {
height: 100%;
left: 0;
opacity: 0.1;
top: 0;
visibility: hidden;
width: 100%;
z-index: 1;
position: fixed;
}
This way, your mask acts as the click away. 这样,你的面具就像点击一样。 You can bind/unbind events and use the
.main-mask
class with other elements. 您可以绑定/取消绑定事件,并将
.main-mask
类与其他元素一起使用。 The downside is that it needs to be added to the page. 缺点是需要将其添加到页面中。 You could use css
body:after {content:''}
to remove that dependency. 您可以使用css
body:after {content:''}
删除该依赖项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.