jquery - 当用户在菜单区域之外单击时，如何使用 jquery 隐藏下拉菜单？

Question

我希望用户能够单击“单击此处”并在显示/隐藏下拉菜单之间切换。这工作正常。我还希望用户能够在下拉区域之外单击并隐藏当前显示的下拉菜单。我该怎么做呢？

jQuery：

function dropDown() {
    $(document).ready(function(){
        $('#myID').load('my_file.php',function(){
            document.getElementById("myID").style.visibility="visible";
            $('#myID').slideToggle('fast');
        })
        return false;
    });
}

HTML：

<div onclick="dropDown()">Click Here</div>
<div id="myID"></div>

CSS：

#myID {
visibility:hidden;
z-index:9999;
display:none;
}

Answer 1

从代码中删除visibility:hidden属性

div为 the和 the附加点击处理程序document

$('.dropdown').on('click', function(e) {
    e.stopPropagation();
    $('#myID').slideToggle('fast');
});

$(document).on('click', function(e) {
    if( $(e.target).hasClass('dropdown') || $(e.target).attr('id') === 'myID'){

    }
    else{
      $('#myID').hide();     
    }
});
​

CSS

#myID {
    z-index:9999;
    display:none;
    width:200px;
    height:300px;
    background-color: orange;
}​

检查小提琴

如果你想visibility:hidden在你的代码中使用，那么你需要省略display:none，反之亦然......

Answer 2

对于里面的点击，因为你已经在使用 jQuery，你应该有 HTML：

<div id="myDropdown">Click Here</div>

使用 jQuery：

$('#myDropdown').click( function(e){
        $('#myID').load('my_file.php',function(){
            $('#myID').show('fast');
            e.stopPropagation();
        })
        return false;
  });

然后让它在点击时卷起，而不是在 上myDropdown，你的 jQuery 应该是：

$(":not(#myDropdown)").click(function(){
      $('#myID').hide('fast');
});

看到一个工作小提琴：http: //jsfiddle.net/sablefoste/2YuLy/

Answer 3

function dropDown() {
        $('#myID').load('my_file.php',function(){
            document.getElementById("myID").style.visibility="visible";
            $('#myID').slideToggle('fast');
        });

        $(':not(#myId)').bind('click', toggleDropdown);

        return false;

}

var toggleDropdown = function() {
      $('#myID').slideToggle('fast');
      $(':not(#myId)').unbind('click', toggleDropdown);
};