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

我使用这种方法，我认为这是一个更清晰的答案。

在开始/结束正文标记之后/之前添加到您的 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 回答