点击离开时如何显示

Question

我创建了一个移动导航，当点击搜索图标时，它会展开，旁边的徽标会通过添加 class 隐藏消失。但是当我点击离开时，我不知道如何取回图标。谁能帮帮我吗？谢谢！

导航栏

带扩展搜索的导航栏

代码如下：

<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').click(function(){
    $("#header-logo").removeClass("hide");
});

但是点击搜索框也会触发 body.click 所以你应该通过添加 event.stopPropagation():

来防止点击搜索框时点击正文

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

点击离开时如何显示

How to show when click away

javascript

jquery

responsive-design