javascript - 展开搜索 关闭 单击“关闭 JQuery”

Question

我昨天制作了一个扩展的 JQuery 搜索框，它的作用就像一个魅力!但是，我在创建一个脚本时遇到问题，当用户单击搜索框时，它会关闭。

这是我的 JQuery:

function expandSearch(){
                $('#search-input').toggleClass('search-input-open');
         }

这是我的 HTML:

<div class="navigation-search ngen-search">
    <form class="ngen-search-form form-search" action="search" method="get">
        <input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
        <span onclick="expandSearch()" class="form-search-submit" value="&#x1f50e;">&#x1f50e;</span>
    </form>
</div>

还有我的 CSS:

.ngen-search{
    padding:0px 0px 0px;
}
.form-search-input{
    width:0px;
    height:55px;
    border: 0;
    outline: 0;
    font-size:21px; 
    padding: 0px 0px 0px 0px;
    color: #151515;
    transition: all 0.5s;
}
.search-input-open{
    width:410px !important;
    padding: 0px 0px 0px 20px !important;
    display: initial !important;
}
.form-search-submit{
    display:inline-block;
    width:55px;
    height:43px;
    border: 0;
    outline: 0;
    background-color:#151515;
    font-size:21px;
    color: white;
    cursor: pointer;
    text-align:center;
}

感谢所有帮助!谢谢!

另外，请注意，我对 JQuery 很陌生，很少使用它。

Answer 1

您可以编写一个点击处理程序来监听页面中任意位置的点击，然后删除该类，例如

jQuery(function($) {
  $('#search-trigger').click(function() {
    $('#search-input').toggleClass('search-input-open');
  });

  $(document).click(function(e) {
    if (!$(e.target).closest('.ngen-search-form').length) {
      $('#search-input').removeClass('search-input-open');
    }
  })
})

.ngen-search {
  padding: 0px 0px 0px;
}
.form-search-input {
  width: 0px;
  height: 55px;
  border: 0;
  outline: 0;
  font-size: 21px;
  padding: 0px 0px 0px 0px;
  color: #151515;
  transition: all 0.5s;
}
.search-input-open {
  width: 410px !important;
  padding: 0px 0px 0px 20px !important;
  display: initial !important;
}
.form-search-submit {
  display: inline-block;
  width: 55px;
  height: 43px;
  border: 0;
  outline: 0;
  background-color: #151515;
  font-size: 21px;
  color: white;
  cursor: pointer;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation-search ngen-search">
  <form class="ngen-search-form form-search" action="search" method="get">
    <input type="text" name="q" id="search-input" class="form-search-input" placeholder="Search for games..." dir="ltr">
    <span id="search-trigger" class="form-search-submit" value="&#x1f50e;">&#x1f50e;</span>
  </form>
</div>