Я создаю сайт, на котором у меня есть значок поиска на панели навигации. my search icon Когда пользователь нажимает значок поиска, он должен скрываться, используя класс «Скрыть», а также должен удалить класс hide из строки поиска. my search bar div Я сделал это с помощью jQuery, но он не работает. Что мне делать?Скрыть и показать поиск 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');
});
В вашем последнем фрагменте кода вы добавляете класс 'hide' и следующий оператор, который вы удаляете из того же класса. Я не думаю, что он делает какую-либо логику. –
Вам нужно предотвратить действие click click для элемента привязки' $ ('# navbar- Searc h '). on (' click ', function (e) { e.preventDefault(); $ (this) .addClass ('hide'); $ ('# navbar-searchbar'). RemoveClass ('hide'); }); ' –