Click anywhere to remove class

Question

The sample code is here: http://codepen.io/vincentccw/pen/loAwu

Basically what I want to do is creating a custom dropdown list using tag but replaceable div button.

My problems is once I click on the div, the custom class will be added(drop down list appear), but then when I click on anywhere else the second time, I want to remove the class and hence back to original state. How should I do that?

$(function(){ 

$(".dButton").click(function(){
   $("div ul.customDropDownList").addClass("clickButtonReveal");
});     
$('body').click(function(){
if( $("div ul.customDropDownList").hasClass("clickButtonReveal") ){
      alert("remove class");
      $("div ul.customDropDownList").removeClass("clickButtonReveal");
      };
    });
}); 

For now both the click function will triggered at the same time....

Solution 1

try this

$(".dButton").click(function (e) {
    e.stopPropagation();
    $("div ul.customDropDownList").addClass("clickButtonReveal");

});

Updated below content:

for more info

Solution 2

You could just stop propagation on button click:

$(".dButton").click(function (e) {
    e.stopPropagation();
    $("div ul.customDropDownList").addClass("clickButtonReveal");

});

Solution 3

You could try this and check the id of your click target:

html:

<div id="test">

</div>

css:

#test{
    background-color:red;
    width:200px;
    height:200px;
}

javascript:

$(document).ready(function(){
    $(document).click(function(e){
       if(e.target.id == 'test')
       {
           alert('Red box clicked!');
       }
       else
       {
           alert('Clicked something else');
       }
    })
})

Working example here:

http://jsfiddle.net/JXZhP/