Javascript 使用Jquery关闭下拉菜单并单击页面上的任意位置

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

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

和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(event) {
    if (! $(event.target).parents().andSelf().is("#siteSelector")) {
        $("a:first", this).removeClass('siteSelect_anchor');
        $("ul:first",this).removeClass('siteSelect_ul');
    }
});

---

另外，将其移到

#siteSelector

元素的单击处理程序之外。似乎您正在将列表项和文档的处理程序绑定到

#siteSelector

单击处理程序中。这会引起问题。每次单击

#siteSelector

元素时，都会在其他对象上绑定一个新的单击处理程序副本，这将导致它们多次运行，这可能会导致各种奇怪的不良行为。

您应该移动

$（文档）。单击所有事件回调之外的
。否则，每次单击$（“#siteSelector”）它都会被绑定。而且它在第一次单击时不起作用，因为单击事件尚未绑定到文档

修改代码：

我过去使用过
$（“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;
    }
});

这是你想要的吗


JS

HTML


以max身份登录













​
遗憾的是，这似乎也不起作用，即当我单击页面上的任何位置时，下拉菜单都不会消失：（它起作用了！但是，一个问题是，我的代码中替换文本$（“#siteSelector>a”）.text（liTxt）的部分似乎不再起作用了。我还注意到，您在e.stopPropagation（）之后添加了return false；…这是冗余吗？@max7我对文本进行了更改。您可以删除e.stopPropagation（）.return false将处理该问题。@max7您可以在代码中删除它们。我正在使用它们进行调试。控制台帮助显示对象信息我尝试了此操作，但似乎不起作用。我所做的是：使其90%工作：。我唯一遇到的问题是，当您单击“切换到”时，使菜单消失第二次链接。此外，我必须将页脚设置为200px高才能抓住
主体。mouseUp
。唉，我尝试了你的想法，但没有成功：（同样，我完全同意我可能没有正确地集成您的解决方案。如果有人感兴趣，这里有一把小提琴可以用来修改我的原始代码：这正是我想要的。
    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');
    });
}

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

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

<!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>
​