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

hide menu if element is not clicked in query

本文关键字：元素 隐藏菜单 单击 查询 如果      更新时间：2023-09-26

我试图在单击文档时隐藏菜单".options"，但仅单击图标".fa-gear"时显示它。我知道是（"点击"）是无效的，但我不知道还能做什么。

$(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>

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

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

你可以检查 event.target ：

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

您可以检查类的事件目标。

$(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();
    }
});
相关文章：