我正在尝试制作一个响应式动态搜索字段。当单击搜索图标时,它将显示并更改按钮图标。当单击搜索字段之外时,它也会关闭。
CodePen Here
立即购买,点击搜索字段外部和内部即可关闭。
jQuery(document).ready(function($){
$('.search-button').on('click',function(e){
e.stopPropagation();
$('.search-field-wrap').toggle(500);
$('.search-field-wrap').css("display","flex");
$('.search-button>.fa').toggleClass("fa-search fa-close");
});
$(document).click(function(e){
$(".search-field-wrap").slideUp(300);
$('.search-button>.fa').toggleClass("fa-search fa-close");
});
});
html {
margin: 40px auto;
}
.search-field-wrap{
display:none;
}
.search-wrap{
display:inline-flex;
}
.search-filed-item{
display:inline-flex;
}
.btn-search {
background: #424242;
border-radius: 0;
color: #fff;
border-width: 1px;
border-style: solid;
border-color: #1c1c1c;
}
.btn-search:active, .btn-search:hover {
background: #1c1c1c;
color: #fff;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="search-wrap col-sm-4">
<button class="search-button btn" type="button"><i class="fa fa-search fa-fw"></i></button>
<div class="search-field-wrap">
<input type="text" class="search-filed-item form-control" placeholder="Search for...">
<button class="search-filed-item btn btn-search" type="button"><i class="fa fa-search fa-fw"></i></button>
</div>
</div>
</div>
最佳答案
只需单击文档时检查字段属性。它会对你有所帮助。
jQuery(document).ready(function($){
$('.search-button').on('click',function(e){
e.stopPropagation();
$('.search-field-wrap').toggle(500);
$('.search-field-wrap').css("display","flex");
$('.search-button>.fa').toggleClass("fa-search fa-close");
});
$(document).click(function(e){
e.stopPropagation();
$(".search-field-wrap").slideUp(300);
if($('.search-field-wrap').css("display") == 'flex'){
$('.search-button>.fa').toggleClass("fa-search fa-close");
}
});
$(".search-filed-item").click(function(e) {
e.stopPropagation();
});
});
html {
margin: 40px auto;
}
.search-field-wrap{
display:none;
}
.search-wrap{
display:inline-flex;
}
.search-filed-item{
display:inline-flex;
}
.btn-search {
background: #424242;
border-radius: 0;
color: #fff;
border-width: 1px;
border-style: solid;
border-color: #1c1c1c;
}
.btn-search:active, .btn-search:hover {
background: #1c1c1c;
color: #fff;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="search-wrap col-sm-4">
<button class="search-button btn" type="button"><i class="fa fa-search fa-fw"></i></button>
<div class="search-field-wrap">
<input type="text" class="search-filed-item form-control" placeholder="Search for...">
<button class="search-filed-item btn btn-search" type="button"><i class="fa fa-search fa-fw"></i></button>
</div>
</div>
</div>
关于jQuery动态搜索字段stopPropagation无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51792846/