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

Question

I want to show/hide a layer when a user clicks on/out a button. I have this simple code that you can check 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; }

but when I click the button, the console shows me how the two events are fired. Is it a bug with :not selector? or am I doing anything wrong?

Answer 1

The way to do that is by not using :not , but filtering inside the event handler

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中包含很多元素，则选择起来非常昂贵。