Ну, я пытаюсь сделать вход поиска расширяется при щелчке в моей кнопке class= "expand". У меня уже есть эта работа, но по крайней мере две ошибки. Во-первых, когда я нажимаю кнопку, чтобы развернуть вход, вход расширяется, но затем сразу же сжимается. Я не понимаю, почему это происходит. Вторая ошибка - везде, где я нажимаю на свою страницу, вход расширяется и сжимается сразу. Я думаю, что нужно использовать $('html').click(function()
но я не вижу другого способа сделать это. Можете ли вы немного помочь?
Мой jQuery:
<script type="text/javascript">
$(function() {
$('button.expand').click(function() {
$('#test').width(0).show().animate({width: 180}, 500);
});
$('html').click(function() {
$('#test').width(180).show().animate({width: 0}, 500);
});
});
</script>
Мой Html:
<nav id="menu">
<ul>
<li><a href="Home.html">Home</a></li>
<li><a href="About.html">About</a></li>
<li>
<div id="search-container">
<span id="search" >
<form name="form1" >
<input id="test" type="search" placeholder="Search..." required="required" onfocus="if(this.placeholder == 'Search...') {this.placeholder=''}" onblur="if(this.placeholder == ''){this.placeholder ='Search...'}" />
<button class="expand" type="submit"><i class="fa fa-search"></i></button>
</form>
</span>
</div>
</li>
</ul>
</nav>
Мой css: CSS:
.form-container input {display:none;}
Как контролировать состояние видимости #test
?
$(function() {
$('button.expand').click(function() {
$('#test').width(0).show().animate({width: 180}, 500);
$('#test').addClass("visible");
});
$('html').click(function() {
if($('#test').hasClass("visible")){
$('#test').width(180).show().animate({width: 0}, 500).removeClass("visible");
}
});
});
Вы можете посмотреть в jQuery Animate docs и ответить на stackoverflow. Onclick Expand Textbox Width. Надеюсь, это поможет вам.