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?

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?

• javascript
• html
• jquery
• jquery-events

Share Improve this question Follow edited Aug 7, 2022 at 10:35 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Oct 4, 2012 at 0:22 max7max7 79822 gold badges1616 silver badges3737 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Maybe change the click handler on the document to this:

$(document).click(function(event) {
    if (! $(event.target).parents().andSelf().is("#siteSelector")) {
        $("a:first", this).removeClass('siteSelect_anchor');
        $("ul:first",this).removeClass('siteSelect_ul');
    }
});

Also, move it outside of the click handler for the #siteSelector element. It seems like you are binding the handlers for the list items and the document within the #siteSelector click handler. This will cause problems. Every time you click on the #siteSelector element, you will bind a new copy of the click handlers on the other things, which will result in them being run multiple times, which can cause all sorts of strange undesirable behavior.

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');
    });
}

Is this what you want?

http://jsfiddle/VVS3T/11/

JS

function clickNav() {
    $("#siteSelector").click(function() {
        $("a:first", this).toggleClass('siteSelect_anchor');
        $("ul:first", this).toggleClass('siteSelect_ul');
    });
    $(".item").click(function() {
       $("#siteSelector > a").text($(this).text());
   });
}
$(clickNav);
$(document).bind("click", function(e) {
    if(e.target.id != "siteSelectorAnchor" && !$(e.target).hasClass('item')) {
       $("#siteSelector a:first").removeClass('siteSelect_anchor');
       $("#siteSelector ul:first").removeClass('siteSelect_ul');
    }
});
​

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />

    </head>

<body>
  <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 id="siteSelectorAnchor" href="#" class="">Switch to&#9660;</a>
                <ul>
                    <li><a class="item" href="JavaScript:void(0);">Item 1</a></li>  
                    <li><a class="item" href="JavaScript:void(0);">Item 2</a></li>
                    <li><a class="item" href="JavaScript:void(0);">Item 3</a></li>
                    <li><a class="item" href="JavaScript:void(0);">Item 4</a></li>
                </ul>
            </li>
            <li><a href="/c/portal/logout">Sign Out</a></li>
        </ul>
    </div>

    <footer>

    </footer>
    </div>
    </body>
</html>
​

I've used $("body").mouseup() in the past:

var visible = false;

$("#siteSelector").click(function() {
    // your code from above, plus:
    visible = true;
}

$("body").mouseup(function(){ 
    if (visible) {
        $("a:first", this).removeClass('siteSelect_anchor');
        $("ul:first",this).removeClass('siteSelect_ul');
        visible = false;
    }
});