CODEWITHSUNDEEP
jqueryhtml
yaakov
yaakov

Reputation: 4685

Jquery :not not working with id

I want to make a dropdown menu, so that when anywhere on the page but the dropdown menu or the links leading to them are clicked, the dropdown is hidden.
Jquery:

$('body:not(#top-links-bar)').click(function(){
   $('.dropdown').hide();
});

HTML:

    <div id="top-links-bar">

    <span  class="top-link link-bar-link " style="font-size:20pt; border:inherit;border-radius:inherit;"></span>

    <span class="top-link link-bar-link dropdown-opener" id="learn">Link One <span class="caret"></span></span>



    <span class="top-link link-bar-link dropdown-opener" id="stories-link">Link Two<span class="caret"></span></span>

    <span class="top-link link-bar-link" id="tutorials-and-snippets">Link Three<span class="caret"></span></span>

    <!---<span class="top-link link-bar-link dropdown-opener" id="affiliate-content">Link Four <span class="caret"></span></span>--->

    <a href="" style="color:blue;" style="position:relative; right:50px; top:20px;"><span class="top-link link-bar-link" id="login" >Link Five</span></a>

<a href="" style="color:blue;" style="position:relative; right:100px; top:20px;"><span class="top-link link-bar-link" id="create-account"  >Link Six</span></a>



    </div>
    <div id="learn-dropdown" class="dropdown" style="font-weight:bold;">
    <p style="font-size:20pt;">HTML and CSS
    <ul>
    <li> <a href="learn/learn-html">The Basics</a></li>
    </ul>
    </p>
    <p style="font-size:20pt;">Javascript</p>
    </div>
    <div id="affiliate-content-dropdown" class="dropdown">
   </div>   
    <div id="snippet-dropdown" class="dropdown">
   </div>
    <div id="stories-dropdown" class="dropdown">
    </div>

I have other code that makes the dropdowns actually drop down. With this code, the dropdowns stay hidden. Fiddle, and site

Upvotes: 1

Views: 109

Answers (3)

Aravind Sivam
Aravind Sivam

Reputation: 1099

There issues in the selecor you checking for the body without id top-links-bar this false every time try this 

    $('body div:not(#top-links-bar)').click(function () {
        $('.dropdown').hide();
    });

I think you go with the below comment

Try this 

$('body').click(function(e){
    if (!$(e.target).closest('#top-links-bar').length) {
        $('.dropdown').hide();
    }
});

or try this 

 $('body').click(function(e){
        if (!$(e.target).parents('#top-links-bar').length) {
            $('.dropdown').hide();
        }
    });

Upvotes: 1

graycodes
graycodes

Reputation: 363

Ah, that's not what the :not selector does unfortunately. The selector is selecting the 'body' element only (and not the children of it) so your :not won't do anything there. See the docs here.

In your click function, you can just query the element, for example:

$('body').click(function(){
    if ($(this).attr('id') !== 'top-links-bar') {
        $('.dropdown').hide();
    }
});

EDIT: Above is wrong, actually, this will work. Thanks @SLaks and @Huangism:

$('body').click(function(e){
    if (!$(e.target).closest().length) {
        $('.dropdown').hide();
    }
});

Upvotes: 1

Beckafly
Beckafly

Reputation: 411

You are not using :not correctly. try this:

jsfiddle [http://jsfiddle.net/strannij/z5bhq9zz/6/][1]

$(document.body).children().not('#top-links-bar').click(function(){
$('.dropdown').hide();

});

Upvotes: 0

Related Questions