javascript - 使用此脚本无法通过单击外部来关闭按钮

Question

我正在尝试使用以下脚本通过单击外部来使按钮关闭其菜单。

$(document).ready( function(){

$('#trigger').click( function(event){

    event.stopPropagation();

    $('#drop').toggle();

});

$(document).click( function(){

    $('#drop').hide();

});});

你可以看到演示（[Ideal Fiddle]）（http://jsfiddle.net/craigmdennis/H2Chj/2/）

但是我的按钮 ([Problematic Fiddle]) ( http://jsfiddle.net/xJ9ug/ ) 不能很好地工作。只需单击几下即可打开菜单。你能告诉我css或脚本有什么问题吗？任何帮助深表感谢。

Answer 1

看看这个小提琴。您只需要一个简单的条件检查来完成这项工作。

if ($('#dropdown').has(e.target).length === 0)

Answer 2

实际上你的代码是正确的..它不工作的原因是它有<input type="checkbox" />一个跨度并且正在为跨度添加点击事件。我不知道复选框不让事件传播但删除复选框的确切原因就像一个魅力..

还有一件事you haven't closed first span tag properly.

没有复选框的工作演示在这里

使用 addClass() 和 removeClass() 来达到你演示的效果。

谢谢

Answer 3

添加.dropdown_content li a，它现在可以工作了..

$(document).ready( function(){

    $('.dropdown').click( function(event){       
        event.stopPropagation();        
        $('.dropdown_content li a').toggle();      
    });   
});