jquery - 点击打开 Drop Down 在 IE 和 FireFox 中不起作用

Question

我有一个 jquery 函数，我可以点击它，它会带来一个 Drop Down 。一切都很好，但这在 IE 和 Firefox 中不起作用。当我单击没有任何反应或没有下拉菜单出现时。

这是来自 Js Fiddle 的示例：http: //jsfiddle.net/LwLsZ/

没有找到解决方法。如果有专家可以解决问题，那就太好了

HTML

<div id="gear">
Click Me

<div id="dropdown">  </div>

</div>

CSS

#gear {
margin: 100px;
width: 100px;
height: 30px;
border: 1px solid;
position: relative;
}

#dropdown {
position: absolute;
top: 30px;
right: -1px;
width: 150px;
height: 100px;
border: 1px solid;
display: none;
}

jQuery

$(function(){

$('html').click(function(){
    if($('#dropdown').is(':visible')){
       $('#dropdown').hide(); 
    } 
});

$('#gear').click(function(){
   event.stopPropagation();
   $('#dropdown').toggle(); 
});

 });

Answer 1

您缺少event事件侦听器的参数。将您的 jQuery 代码更改为

$(function(){
    $('html').click(function(event){
        if($('#dropdown').is(':visible')){
           $('#dropdown').hide(); 
        } 
    });

    $('#gear').click(function(event){
       event.stopPropagation();
       $('#dropdown').toggle(); 
    });
});

它应该可以工作。我分叉了你的 jsfiddle来演示它。

Answer 2

将 更改stopPropagation为 areturn false并将其放在切换后：

http://jsfiddle.net/LwLsZ/1/

Answer 3

将其更改为：

$(function(){

 $(document).click(function(){
   if($('#dropdown').is(':visible')){
    $('#dropdown').hide(); 
   } 
 });

 $('#gear').click(function(e){
   e.stopPropagation();
   $('#dropdown').toggle(); 
 });

});

$(document)注意它可以在 IE 中工作