如何显示何时单击离开

Question

我已经创建了一个移动导航，当点击搜索图标它将展开，它旁边的标志将消失，增加类隐藏。但我不知道如何得到图标时，我点击离开。有人能帮我吗？谢谢!

Nav bar

​

​

具有扩展搜索的Nav条

​

​

以下是守则：

<form class="mobile-search-container" action="https://www.tumblr.com/Search">
   <input id="search-box" type="text" class="search-box" name="q" />
   <label for="search-box"><i class="material-icons search-icon">search</i></label>
   <input type="submit" id="search-submit" />
</form>
<script>
    document.addEventListener("touchstart", function(){}, true);
</script>
<a href="#" class="header-logo d-flex flex-align-items-center" id="header-logo"></a>
<script>
    $("#search-box").click(function(){
    $("#header-logo").addClass("hide");
    });

</script>

Answer 1

您可以使用focusout jquery事件，类似于以下内容：

$("#search-box").focusout(function(){
  $("#header-logo").removeClass("hide");
});

Answer 2

除了搜索框之外，您希望在任何地方显示图标，所以当body单击时，可以这样做：

$('body').click(function(){
    $("#header-logo").removeClass("hide");
});

但是，单击“搜索”框也会触发body.click，因此当通过添加event.stopPropagation()单击“搜索框”时，应防止单击“正文”。

$("#search-box").click(function(e){
    $("#header-logo").addClass("hide");
    e.stopPropagation();
});