2

到目前为止，我有以下代码：

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

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

单击即可打开下拉菜单，但仅当您再次单击时才会关闭#siteSelector。如果有人单击页面上的任何位置，我需要关闭它，这就是我使用它的原因，$(document).click(function)但它不起作用，我不知道为什么。有任何想法吗？

4

4 回答 4

4

也许将文档上的点击处理程序更改为：

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

#siteSelector此外，将其移到元素的单击处理程序之外。似乎您正在为#siteSelector单击处理程序中的列表项和文档绑定处理程序。这会导致问题。每次单击#siteSelector元素时，都会在其他事物上绑定单击处理程序的新副本，这将导致它们多次运行，从而导致各种奇怪的不良行为。

于 2012-10-04T00:28:20.183 回答
1

这是你想要的吗？

http://jsfiddle.net/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>
​
于 2012-10-04T18:53:08.050 回答
1

您应该将您$(document).click 的所有事件回调移出。否则每次单击 $("#siteSelector") 时它都会被绑定。并且在第一次单击时它不起作用，因为单击事件尚未绑定到文档。

修改代码：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');
    });
}
于 2012-10-04T00:29:46.600 回答
0

我过去用过$("body").mouseup()：

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;
    }
});
于 2012-10-04T00:30:43.550 回答