Javascript JS在脱离div时显示/隐藏/关闭

我写了这个js+html/css Tt的工作应该是： 打开/关闭。advSearch

。advSearch btn

关闭

.advSearch control.canc

但如果在

             $(document).click(function(event) {
                 if ($(event.target).parents().index(container) == -1) {
                     if (container.is(":visible")) {
                         container.hide()
                     }
                 }
             })

Html部分

<div class="advSearch">
   <span class="advSearch-btn">Advanced Search</span>
  <div class="advSearch-container">
    <div class="col left">
      <h3>Customer</h3>
      <form action="">
        <label><h4>First Name</h4> <input type="text"> </label>
        <label><h4>Last Name</h4> <input type="text"> </label>
        <label><h4>Email</h4> <input type="text"> </label>
        <label><h4>Phone</h4> <input type="text"> </label>
      </form>
    </div>
    <div class="col central">
      <h3>Address</h3>
      <form action="">
        <label><h4>Adsress</h4> <input type="text"> </label>
        <label><h4>City</h4> <input type="text"> </label>
        <label><h4>State</h4> <input type="text"> </label>
        <label><h4>Zip</h4> <input type="text"> </label>
      </form>
    </div>
    <div class="col right">
      <h3>Other</h3>
       <form action="">
        <label><h4>Policy</h4> <input type="text"> </label>
        <label><h4>App ID</h4> <input type="text"> </label>
        <label><h4>Quote</h4> <input type="text"> </label>
        <label><h4></h4> <input type="text"> </label>
      </form>
    </div>
  <div class="advSearch-control">
    <button class="canc">Cancel</button>
    <button class="srch">Search</button>
  </div>
  </div>
</div>

             $(document).click(function(event) {
                 if ($(event.target).parents().index(container) == -1) {
                     if (container.is(":visible")) {
                         container.hide()
                     }
                 }
             })

My尝试在鼠标单击时关闭ouf： （用有效的代码注释）

             $(document).click(function(event) {
                 if ($(event.target).parents().index(container) == -1) {
                     if (container.is(":visible")) {
                         container.hide()
                     }
                 }
             })

或

             $(document).click(function(event) {
                 if ($(event.target).parents().index(container) == -1) {
                     if (container.is(":visible")) {
                         container.hide()
                     }
                 }
             })

问题是我做错了什么？

---

先谢谢你

试试这个。请注意，当高级搜索打开时，不需要创建事件。只需将其正常加载即可：

             $(document).click(function(event) {
                 if ($(event.target).parents().index(container) == -1) {
                     if (container.is(":visible")) {
                         container.hide()
                     }
                 }
             })

$(document).click(function(e) {
    if($(e.target).parents('.advSearch').first().length == 0)
        container.fadeOut(300);
});

---

不评论第一个很好，它淡出了开放的div。到底是什么问题？可能和这里的问题一样，听起来很相似？问题是，如果他在高级搜索屏幕外单击，他想关闭该屏幕。如果您使用我的任何评论脚本至少单击一次屏幕外，然后尝试使用

再次打开菜单。advSearch btn

它会自动关闭。。。。所以有一个bug我想不出来。它起作用了，我添加了几行代码来保持按钮隐藏事件的顺序<代码>$（'.canc'）.css（'display'，'none'）$（'.srch'）.css（'display'，'none'）请您就它是如何工作的发表几句话好吗？我们在这里所做的是将a click事件绑定到文档本身，以便注册这些单击并使用它检查某些内容

e.target

指向启动事件的元素

parents（）

导航从目标元素开始的所有父元素，然后对目标元素进行筛选以匹配承载搜索表单的容器的类。

first（）

操作是一个过滤器，在找到过滤器后使其停止，这是缩短jQuery执行的内部

。最后，我们通过检查结果对象数组的长度来检查是否找到了匹配项。