如果我点击外面，让下拉菜单消失

Question

我有这个搜索框 search box

我已经编写了一个功能，当用户点击外面或按下Esc按钮时，搜索框会消失。

问题是，当用户点击搜索字段时，搜索按钮＆＃34; Suchen＆＃34;在菜单中不会消失。

after search

我的代码：

//Outside click
$("body").click(function(){
    jQuery('.searchfieldbox').fadeOut(500);
});
$("body").keydown(function(e){
    if(e.keyCode === 27 || e.which === 27 ){
        jQuery('.searchfieldbox').fadeOut(500);
    }
});
$(".pg-suche-lupe-button").click(function(e){
    e.stopPropagation();
});

如何解决这个问题???

Answer 1

尝试在身体点击上使用$(e.target).hasClass。

Stack Snippet

＆＃13;

＆＃13;

$("body").click(function(e) {
  if (!$(e.target).hasClass("searchfieldbox")) {
    jQuery('.searchfieldbox').fadeOut(500);
  }
});

$("#input").click(function(e) {
  e.stopPropagation();
  jQuery('.searchfieldbox').fadeIn(500);
});
$("body").keydown(function(e) {
  if (e.keyCode === 27 || e.which === 27) {
    jQuery('.searchfieldbox').fadeOut(500);
  }
});

＆＃13;

.searchfieldbox {
  height: 100px;
  background: #ccc;
  width: 100px;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<div class="searchfieldbox"></div>

＆＃13;

＆＃13;

＆＃13;