Question

我试图隐藏菜单＆＃39; .options＆＃39;单击文档时，只显示一个图标＆＃39; .fa-gear＆＃39;点击。我知道（＆＃39;点击＆＃39;）无效，但我无法弄清楚还有什么可做。

$(document).click(function() {  
    if($('.fa-gear').is(':clicked')) {
        $('.options').show();
    } else {
        $('.options').hide();
    }
});


<div class="options" style="display: none;">
    <span>Option One</span>
</div>

<i class="fa fa-gear"></i>

Answer 1

测试事件目标是否为.fa-gear

$(document).click(function(event) {  
    if($(event.target).is('.fa-gear')) {
        $('.options').show();
    } else {
        $('.options').hide();
    }
});

Answer 2

您可以查看event.target：

$(document).click(function(event) {  
    if($(event.target).hasClass("fa-gear")) {
        $('.options').show();
    } else {
        $('.options').hide();
    }
});

Answer 3

您可以查看班级的活动目标。

$(document).click(function(event) {  
    if($(event.target).hasClass("fa-gear")) {
        $('.options').show();
    } else {
        $('.options').hide();
    }
});

另一种方法是只听取fa-gear类的点击并切换可见性。我认为这对用户来说是一种更好的体验。

$('.fa-gear').click(function() {  
    $('.options').toggle();
});

如果您仍想隐藏文档上的菜单，只需在齿轮按钮上切换，就可以将两者合并。

$(document).click(function(event) {  
    if($(event.target).hasClass("fa-gear")) {
        $('.options').toggle();
    } else {
        $('.options').hide();
    }
});

如果未在查询中单击元素，则隐藏菜单

3 个答案: