j查询动态搜索字段停止传播不正常工作

Question

我正在尝试制作一个响应式动态搜索字段。 单击搜索图标时，它将显示并更改按钮图标。 此外，在搜索字段外单击时它将关闭。

代码笔在这里

立即购买，当单击搜索字段的外部和内部时关闭。

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>

Answer 1

只需在单击文档时检查字段属性即可。它会帮助你。

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>

Answer 2

您需要输入字段和搜索按钮的单击处理程序，以便单击该按钮不会传播到文档。

此外，单击搜索按钮外部应始终关闭搜索字段，而不是切换它。

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);
$('.search-button>.fa').removeClass("fa-search").addClass("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>