Question

我想在用户点击/按下按钮时显示/隐藏图层。我有这个简单的代码，您可以检查here：

JQUERY：

jQuery(function(){

    jQuery('button.profile-button').on('click', function() {
        jQuery('.login-sidebar').show();
        console.log("executed show");
    });
    jQuery(':not(button.profile-button)').on('click', function() {
        jQuery('.login-sidebar').hide();
        console.log("executed hide");
    });

});

HTML：

<button class="profile-button">Profile</button>
<div class="login-sidebar">Login Sidebar</div>

CSS：

.login-sidebar { display: none; }

但是当我点击按钮时，控制台会告诉我这两个事件是如何被触发的。这是:not选择器的错误吗？或者我做错了什么？

Answer 1

这样做的方法是不使用:not，而是在事件处理程序内部进行过滤

jQuery(function($){
   $(document).on('click', function(e) {
     $('.login-sidebar').toggle( $(e.target).closest('.profile-button').length > 0 );
   });
});

FIDDLE

Answer 2

尝试$("*:not(button.profile-button)")，但如果DOM中有很多元素，那么这是一个非常昂贵的选择。

“：not”选择器不适用于JQuery

2 个答案: