jQuery simple dropdown

Question

I am trying to make a simple dropdown using jQuery which opens on mouse click and closes on mouse click or a click over the document. I have the following JS code to make that work. Refer to my code at http://jsfiddle.net/4mCsy/1/ .But the code is not working :-

var x=0;
if(x==0){
    $(".notification").click(function(){
        $(".drpdwn").css("display","block");
    });
    x=1;

}
if(x==1){
    $(".notification").click(function(){
        $(".drpdwn").css("display","none");
    });
    x=0;

}

But, when I change the code to the following(removing the lower portion of the code) (http://jsfiddle.net/4mCsy/2/), the code partly works in just openiing the dropdown. But does not closes (OBVIOUSLY):-

var x=0;
if(x==0){
    $(".notification").click(function(){
        $(".drpdwn").css("display","block");
    });
    x=1;

}

Please tell me where am I going wrong. Any help will be appreciated.

MackieeE · Accepted Answer · 2013-10-02 11:10:46Z

2

They've made it a little to do this in recent jQuery versions:

jQuery toggle()

$(document).on('click', '.notification', function() {
    $('.drpdwn').toggle(); 
});

If you wish to exclude the dropdown itself, which is toggling because .drpdwn is child member of .notification, you'd have to exclude it from a given condition - I'd prefer doing that from the event.target.

$(document).on('click', '.notification', function( event ) {
   if ( event.target.className != 'drpdwn' )
       $('.drpdwn').toggle();
});

Demo

Otherwise you'd have to separate the two <div>'s because as explained previously, they're a member of each other. Thus, the jQuery selector will listen to both <div>s when you click .notification. To prevent this, restructure your HTML as below:

<!-- Notification Click -->
<div class="notification">
    Notification
</div>

<!-- Dropdown Div -->
<div class="drpdwn">
</div>

edited Oct 2, 2013 at 11:10

answered Oct 2, 2013 at 10:40

MackieeE

11.9k4 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

h2O Over a year ago

nice answer..(+1) but, the drop down closes on clicking the drop down itself, which I do not want. Plus, I want the drop down to close on document click

MackieeE Over a year ago

Edited the answer to exclude the drpdown :)

MackieeE Over a year ago

@BenLind is there anything else I can help with? :o

Satinder singh Over a year ago

@MackieeE: +1 for done without changing markup ie target.event

Satinder singh · Accepted Answer · 2013-10-02 10:46:03Z

1

$(".notification").on('click',function(){
  $(".drpdwn").toggle();
});

Demo

Updated:

<div class="notification">Notification</div>
<div class="drpdwn"></div>
$(".notification").on('click', function () {
    $(".drpdwn").toggle('slow');
});

Demo 2

answered Oct 2, 2013 at 10:46

Satinder singh

10.2k18 gold badges64 silver badges102 bronze badges

1 Comment

h2O Over a year ago

nice answer..(+1) but, the drop down closes on clicking the drop down itself, which I do not want. Plus, I want the drop down to close on document click

Shivam Chopra · Accepted Answer · 2013-10-02 12:28:35Z

0

You are going write as of now you are only specifying that you need to open the dropdown when you click but not close. So, you can use toggle() to open and close the dropdown.

<div class="notification">Notification</div>
<div class="drpdwn"></div>
$(".notification").on('click',function(){
     $(".drpdwn").toggle('blind', 'options', 500 );
});

Here's the link for it : http://jsfiddle.net/coolshivster/4mCsy/25/

answered Oct 2, 2013 at 12:28

Shivam Chopra

63910 silver badges20 bronze badges

Collectives™ on Stack Overflow

jQuery simple dropdown

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related