通过在框外单击关闭搜索框

Question

我需要帮助来编辑此搜索框模型：

＆＃13;

＆＃13;

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  color: #C0C0C0;
}

* {
  margin: 0px;
  padding: 0px;
  border: 0px;
  outline: 0px;
  box-shadow: 0px;
}

body {
  background-color: pink;
}

#container {
  height: 300px;
  margin-top: 10%;
}

.entypo-search:before {
  position: absolute;
  top: 0.4em;
  left: 0px;
}

#form {
  background-color: white;
  border-radius: 30px;
  padding: 10px 20px;
  width: 13px;
  overflow: hidden;
  position: absolute;
  height: 30px;
  right: 50%;
  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}

form {
  position: relative;
}

input {
  width: 0px;
  height: 25px;
  font-size: 15px;
  margin-left: 30px;  
  /* margin-top: 3px; */
  line-height: 30px;
}

.entypo-search {
  position: absolute;
  top: 20%;
}

#form:hover {
  width: 200px;
}

#form:hover form input {
  width: 200px;
}

#form form input:focus, 
#form form input:active{
  outline:none;
  width: 300px;
}

＆＃13;

<div id="container">
    <div id="form">
    <form action="#" class="entypo-search">
      <fieldset><input id="search" placeholder="Search" /></fieldset>
    </form>  
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

搜索框在悬停时展开和折叠，但如果用户（例如，点击建议下拉列表），搜索框不再悬停并且搜索框崩溃，则会出现问题。 我想改变它的行为，所以只有在框外点击鼠标才会关闭/折叠。

感谢。

Answer 1

我实现了一些javascript，当您将鼠标悬停在AssemblyCatalog assemblyCatalog = new AssemblyCatalog(assembly);上时，然后点击#form时，会查看该javascript。我还删除了.container css并将那个我在事件监听器中打开和关闭的类。

:hover

// closes the form when clicking its container.
document.getElementById('container').addEventListener("click", function() {
  document.getElementById("form").classList.remove("active");
});

// This stops the closing of the form when clicked
document.getElementById('form').addEventListener("click", function(event) {
  event.stopPropagation();
});

// open the form on mouseover
document.getElementById('form').addEventListener("mouseover", function() {
  document.getElementById("form").classList.add("active");
});

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */

[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
  color: #C0C0C0;
}
* {
  margin: 0px;
  padding: 0px;
  border: 0px;
  outline: 0px;
  box-shadow: 0px;
}
body {
  background-color: pink;
}
#container {
  height: 300px;
  margin-top: 10%;
}
.entypo-search:before {
  position: absolute;
  top: 0.4em;
  left: 0px;
}
#form {
  background-color: white;
  border-radius: 30px;
  padding: 10px 20px;
  width: 13px;
  overflow: hidden;
  position: absolute;
  height: 30px;
  right: 50%;
  -webkit-transition: width .55s ease;
  -moz-transition: width .55s ease;
  -ms-transition: width .55s ease;
  -o-transition: width .55s ease;
  transition: width .55s ease;
}
form {
  position: relative;
}
input {
  width: 0px;
  height: 25px;
  font-size: 15px;
  margin-left: 30px;
  /* margin-top: 3px; */
  line-height: 30px;
}
.entypo-search {
  position: absolute;
  top: 20%;
}
#form.active {
  width: 200px;
}
#form.active form input {
  width: 200px;
}
#form form input:focus,
#form form input:active {
  outline: none;
  width: 300px;
}