点击其他地方时需要关闭下拉菜单

need to close drop down on clicking on elsewhere

本文关键字：下拉菜单 方时需 其他      更新时间：2023-09-26

Html:

<div id="contentTitle">
  <span class="btnShare">
    <a href="#">Share</a>
    <ul>
      <li><a href="#">Post to Facebook</a></li>
      <li><a href="#">Email Link</a></li>
      <li><a href="#">Copy Link</a></li>
      <li><a href="#">Print</a></li>
    </ul>
  </span>
</div>

Javascript：

$(document).ready(function(){
  var shnum = 0;
    $('#contentTitle .btnShare a').click(function(){
        if(shnum==0) {
            $('#contentTitle .btnShare ul').css('display','block');
            shnum = 1;
        }
        else {
            $('#contentTitle .btnShare ul').css('display','none');
            shnum = 0;
        }
    });
});

单击"共享"锚点标记时，要显示/隐藏的上述代码下拉列表。我需要关闭下拉菜单，当用户点击其他地方时。上面的代码不支持"$("body"(.click"函数。请帮忙。

$(document).ready(function(){
    var shnum = 0;
    $('#contentTitle .btnShare a').click(function(){
        if(shnum==0) {
        $('#contentTitle .btnShare ul').css('display','block');
        shnum = 1;
    }
        else {
            $('#contentTitle .btnShare ul').css('display','none');
            shnum = 0;
        }
    });
    $('#contentTitle .btnShare a').blur(function(){
        $('#contentTitle .btnShare ul').css('display','none');
        shnum = 0;
    });
});

此代码将执行以下操作：

$(document).click(function(e){
    if (!$('#contentTitle .btnShare a').is(e.target) && !$('#contentTitle .btnShare ul').is(e.target) && $('#contentTitle .btnShare ul').has(e.target).length === 0){
        $('#contentTitle .btnShare ul').css('display','none');
        shnum = 0;
        }
});
相关文章：