Question

我昨天制作了一个不断扩展的JQuery Search Box，它就像一个魅力！但是，我无法创建一个脚本，当用户点击搜索框时它会关闭。

这是我的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>

扩展搜索关闭单击关闭JQuery

1 个答案: