画面上の他の場所をクリックして検索ボックスを終了します。

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