Question

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

单击Share锚标记时，上面显示/隐藏的代码下拉列表。当用户点击其他地方时，我需要关闭下拉菜单。上面的代码不支持“$（”body“）。点击”功能。请帮忙。

Answer 1

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

Answer 2

此代码将执行此操作：

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

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

2 个答案: