HTML
<form class="form-search" role="search">
<a class="search" href="#"><i class="fa fa-search"></i></a>
<input class="input-search" type="text" name="" placeholder="输入搜索内容...">
<a class="hd-search" href="#"><i class="fa fa-times"></i></a>
</form>
CSS
.form-search .input-search {
font-size: 10px;
font-weight: normal;
outline: none;
border: none;
}
.form-search .input-search {
width: 0;
-webkit-transition: all .5s;
-moz-transition: all .5s;
transition: all .5s;
}
.form-search .hd-search {
display: none;
transition: all .3s;
}
.form-search.active .input-search {
width: 200px;
}
.form-search.active .hd-search {
display: inline-block;
}
JS
<script>
(function($) {
$(function() {
//$('.search, .hd-search').on('click', function() {
// $('.form-search').toggleClass('active');
//});
var $formSearch = $('.form-search')
$('.search').on('click', function() {
$formSearch.addClass('active');
})
$('.hd-search').on('click', function() {
$formSearch.removeClass('active');
})
})
})(jQuery)
</script>