javascript - Closing Dropdown menu with a click anywhere on page using jQuery

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

Share Improve this question edited Aug 7, 2022 at 10:35 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Oct 4, 2012 at 0:22 max7 7982 gold badges16 silver badges37 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/

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

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Closing Dropdown menu with a click anywhere on page using jQuery - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)