点击屏幕上的其他任意位置退出搜索框

Question

我构建了一个向下滑动的搜索框。当您按下搜索图标时，搜索框会下拉，如果您按下搜索图标，搜索框将再次消失。除了再次单击搜索图标之外，我想要另一种方式让人们退出搜索框。我还希望能够通过单击搜索框旁边的屏幕上的任何其他位置退出搜索框。我该怎么做？

jsfiddle - https://jsfiddle.net/pkhj0frp/

＆＃13;

＆＃13;

jQuery('.search-icon').on('click', function() {
  jQuery('.search-form').toggleClass('search-visible');
});

＆＃13;

/*--------------------------------------------------------------
## Search
--------------------------------------------------------------*/
.search-icon {
  float: right;
  line-height: 70px;
  cursor: pointer;
  margin: 0px 34px;
}

.search-form {
  -webkit-transition: all .3s ease-in-out;
  -o-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transition: all .3s ease-in-out 250ms ease;
  -moz-transition: all .3s ease-in-out 250ms ease;
  -ms-transition: all .3s ease-in-out 250ms ease;
  -o-transition: all .3s ease-in-out 250ms ease;
  transition: all .3s ease-in-out 250ms ease;
  background: #fff;
  height: 0;
  opacity: 0;
  overflow: hidden;
  padding-left: calc((100vw - 1200px) / 2);
  padding-right: calc((100vw - 1200px) / 2);
  position: absolute;
  top: calc(20% + 1px);
  transform: translateX(-50%);
  left: 50%;
  width: 100vw;
}

.search-form.search-visible {
  opacity: 1;
  height: 110px;
}

.search-form.search-form-permanent {
  border-bottom: none;
  height: 100px !important;
  left: 0;
  opacity: 1 !important;
  padding: 0;
  position: relative;
  transform: none;
  width: 100%;
  z-index: 5;
}

.search-form.search-form-permanent .input-group {
  padding: 0;
  top: 0;
}

.search-form.search-form-permanent .button-search {
  color: #33f;
  outline: none;
}

.search-form.search-form-permanent .button-search:hover {
  color: #b4c5cd;
}

.search-form .input-group {
  margin-left: 18px;
  position: relative;
  width: 100%;
  margin-top: 10px;
}

.search-form .form-control {
  background: #fff;
  border: none;
  border-bottom: 1px #000 solid;
  border-radius: 0;
  box-shadow: none;
  float: left;
  height: auto;
  padding: 0;
  outline: none !important;
  width: calc(100% - 36px) !important;
  font-size: 50px;
  font-family: 'freightlight';
  font-style: italic;
  text-transform: uppercase;
  color: #000;
  box-shadow: none !important;
  border-color: inherit !important;
  -webkit-box-shadow: none !important;
  -webkit-font-smoothing: antialiased;
}

.search-form .form-control:focus {
  background: #fff !important;
  box-shadow: none !important;
  border-color: inherit !important;
  -webkit-box-shadow: none !important;
}

.search-form .button-search {
  background: transparent;
  border: none;
  float: right;
  font-size: 1.4em;
  padding: 6px 0 0 0;
  width: 36px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="search-icon"><img src="https://www.nature.org/cs/groups/webasset/documents/webasset/search-icon.png"></div>
<form role="search" method="get" class="search-form form-inline" action="<?php echo esc_url( home_url( '/' ) ); ?>">
  <div class="input-group">
    <input type="search" value="" name="s" class="input-sm search-field form-control" placeholder="Search">
    <button type="submit" class="button-search icon-search"></button>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

我通过点击屏幕上的任何其他位置和按键快捷键创建退出搜索框。

jQuery('.search-icon').on('click', function(e) {
  e.stopPropagation();
  jQuery('.search-form').toggleClass('search-visible');
});

$(window).bind('keydown', function(e) {
  e.preventDefault()
  var keyCode = e.keyCode || e.which;
  if (keyCode == 117) {
    $('.search-form').toggleClass('search-visible');
  }
});

$(document).click(function() {
  $('.search-form').removeClass('search-visible');
})