jQuery动态搜索字段stopPropagation无法正常工作

Question

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

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>

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>