Question

So far I’ve got the following code:

<div id="wrapper">
<div id="user_info">
<p>Signed in as <span>max</span></p>
<ul>
<li><a href="#">Help</a></li>
<li id="siteSelector"><a href="#" class="">Switch to&#9660;</a>
<ul>
 <li><a href="JavaScript:void(0);">Item 1</a></li>
<li><a href="JavaScript:void(0);">Item 2</a></li>
<li><a href="JavaScript:void(0);">Item 3</a></li>
<li><a href="JavaScript:void(0);">Item 4</a></li>
</ul>
</li>
<li><a href="#">Sign Out</a></li>
</ul>
</div>
</div> 

CSS

#wrapper {
width: 1200px;
}
#user_info {
margin: 0 auto;
text-align: right;
width: 250px;
}
#user_info p {
color: #333333;
margin-bottom: 0;
margin-right: 1.6em;
}
#user_info ul {
margin-top: 5px;
}
#user_info ul li {
float: left;
list-style-type: none;
padding: 5px 3px;
}
#user_info a {
color: #0B594A;
}
#siteSelector {
position: relative;
}
#siteSelector > a {
padding: 0 10px;
}
#siteSelector ul {
display: none;
}
#siteSelector ul li {
text-align: left;
width: 95%;
}
.siteSelect_anchor {
background: none repeat scroll 0 0 #0B594A;
border-radius: 6px 6px 0 0;
color: #FFFFFF !important;
display: block;
margin-top: -5px;
padding-top: 5px !important;
text-decoration: none;
}
.siteSelect_ul {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #0B594A;
border-radius: 6px 6px 6px 6px;
border-style: solid;
border-width: 5px;
box-shadow: 0 5px 20px #666666;
display: block !important;
height: auto;
left: 0;
padding-bottom: 15px;
position: absolute;
top: 20px;
width: 59px;
z-index: 250;
}
.siteSelect_ul a {
margin-left: -30px;
}

And JS:

 function clickNav() {
        $("#siteSelector").click(function() {
            $("a:first", this).toggleClass('siteSelect_anchor');
            $("ul:first", this).toggleClass('siteSelect_ul');
            $(".siteSelect_ul li").click(function(e) {
                var liTxt = $(this, ">a").text();
                $("#siteSelector > a").text(liTxt);
                     e.stopPropagation();
               });
                $(document).click(function() {
                     $("a:first", this).removeClass('siteSelect_anchor');
                     $("ul:first",this).removeClass('siteSelect_ul');
                });
            });
        }

The dropdown opens up with a click just fine but it will only close if you click again on #siteSelector. I need it to close if a person clicks anywhere on the page which is why I used the $(document).click(function) but it does not work and I don’t know why. Any ideas?

Answer 1

You should move your $(document).click outside of all event callback. Otherwise it will get binded every time you click on $(“#siteSelector”). and it would not work at first click as click event is not binded to document yet.

Modified code: jsfiddle

    function clickNav( ) {
    $("#siteSelector").click(function( ) {
        $("a:first", this).toggleClass('siteSelect_anchor');
        $("ul:first", this).toggleClass('siteSelect_ul');        
        return false;
    });
    console.log($("#siteSelector li").length);
    $("#siteSelector li").click(function( e ) {
            var liTxt = $("a", this).text();
        console.log(liTxt, $("#siteSelector > a").length);
            $("#siteSelector > a").text(liTxt);
            e.stopPropagation();
            return false;
        });
    $(document).click(function( ) {
         console.log("a");
        $("a:first", $("#siteSelector")).removeClass('siteSelect_anchor');
        $("ul:first", $("#siteSelector")).removeClass('siteSelect_ul');
    });
}