单击屏幕上的任何其他位置退出搜索框

Question

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

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

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

/*--------------------------------------------------------------
## 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;
}

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

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');
})

单击屏幕上的任何其他位置退出搜索框

Exit search box by clicking anywhere else on screen

html

javascript

jquery

search-box