Question

我正在创建一个网站，其中我在导航栏中有一个搜索图标。my search icon当用户点击搜索图标时，它应该使用＆＃34;隐藏＆＃34; class，它也应该从搜索栏div中删除hide类。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

问题是你的图标在一个锚元素内，点击图标就会触发锚元素的默认点击性质。

你需要阻止这一点，你可以通过调用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>

Answer 2

您不需要创建课程。只需使用：

webView

或者如果你想切换：

$('#navbar-search').hide()
// AND
$('#navbar-search').show()

此外，您还要添加课程＆＃34;隐藏＆＃34;到＃navbar-search，然后尝试从＃navbar-searchbar中删除它。你需要为两者使用相同的id，否则这不会起作用。

所以，如果我做对了，那就是你的代码：

$('#navbar-search').toggle()

Answer 3

使用隐藏类或可见类，例如：

这个div在xs

中可见

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

3 个答案: