Скрыть и показать поиск div с помощью jquery

Question

Я создаю сайт, на котором у меня есть значок поиска на панели навигации. my search icon Когда пользователь нажимает значок поиска, он должен скрываться, используя класс «Скрыть», а также должен удалить класс 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

Вам не нужно создавать класс. Просто используйте:

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

Или, если вы хотите переключиться:

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

Также вы добавляете класс "шкуру" на # NavBar-поиска, а затем пытается удалить его из # NavBar-SearchBar , Вы должны использовать один и тот же идентификатор для обоих, иначе это не сработает.

Так что, если я получаю это право, это будет ваш код:

$('#navbar-search').click(function(){ 
     $('#navbar-searchbar').toggle() 
}) 

Answer 3

использовать скрытый класс или видимый класс, например:

это Диво видно только в хзе