скрыть меню, если элемент не нажимается в запросе

Question

Я пытаюсь скрыть меню «.options», когда документ щелкнут, но покажите его, когда щелкнул значок «.fa-gear». Я знаю, что ('clicked') недействителен, но я не могу понять, что еще делать.

$(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').click(function() { 
    $('.options').toggle(); 
}); 

Если вы все же хотите скрыть меню при нажатии на документ, но переключитесь на кнопку передачи, вы можете объединить два.

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