javascript - 使用 jquery 隐藏和取消隐藏搜索 div

Question

我正在制作一个网站，其中导航栏中有一个搜索图标。 my search icon当用户单击搜索图标时，它应该使用“隐藏”类隐藏自己，并且还应该从搜索栏 div 中删除隐藏类。 my search bar div我使用 jQuery 完成了它，但它不起作用。我该怎么办？

这是我的代码-

Bootstrap CSS-

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">

正文-

<li class="hvr-bounce-to-bottom" id="navbar-search">
<a href="">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</a>
</li>
<div class="input-group width-174px margin-top-8px hide" id="navbar-searchbar">
<input type="text" class="form-control width-100px" placeholder="Search">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" id="navbar-search" aria-hidden="true"></span></button>
</span>
</div>

JS-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="custom.js"></script>

$('#navbar-search').on('click', function(){
$(this).addClass('hide');
$('#navbar-searchbar').removeClass('hide');
});

Answer 1

问题是您的图标在 anchor 元素内，点击图标会触发 anchor 元素的默认点击性质。

你需要阻止它，你可以通过调用 event.preventDefault()

$('#navbar-search').on('click', function(e) {
  e.preventDefault();
  $(this).addClass('hide');
  $('#navbar-searchbar').removeClass('hide');
});

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>

<ul>
  <li class="hvr-bounce-to-bottom" id="navbar-search">
    <a href="">
      <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
    </a>
  </li>

</ul>
<div class="input-group width-174px margin-top-8px hide" id="navbar-searchbar">
  <input type="text" class="form-control width-100px" placeholder="Search">
  <span class="input-group-btn">
<button class="btn btn-default" type="button"><span class="glyphicon glyphicon-search" id="navbar-search" aria-hidden="true"></span></button>
  </span>
</div>