我如何关闭菜单上的点击，当用户点击离开

How do I close menu on click and when the user clicks away?

本文关键字：用户 离开 何关闭 菜单      更新时间：2023-09-26

我有以下代码:

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

我是JQuery的新手，有点困惑。我很容易使用显示功能，但我需要使用关闭或隐藏功能来关闭菜单，当用户再次点击。clicker_class，当用户点击其他东西。我尝试使用e.s stoppropagation ();但没有成功。我怎么做，给我上面的代码?

更新:

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。我现在怎么能做到呢?

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

这里的工作示例

更新了如果在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);

这里的工作示例

看它是否适合你的需要:

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

我使用这个方法，我认为这是一个更简洁的答案。

添加到html页面的开始/结束body标签之后/之前:

<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:''}来移除这个依赖。

相关文章：