Question

我有一个包含不同部分的表单，当用户点击特定部分时，我想要显示一个进度条。该栏最初隐藏显示：无。当点击任何在表单部分之外时，进度条将隐藏。我知道这里有很多类似的问题，但我不能让它适用于我的案例。

对我来说，问题是不仅要定位表单部分id，还要定位其所有子节点，例如输入等。只是部分框架内的所有内容。

这是我的代码：

＆＃13;

$(document).ready(function(){
  
  $(function() {
      $(document).on('click', function(e) {
          if (e.target.id == 'form-section' ) {
              $('#progressbar').show();
          } else {
              $('#progressbar').hide();
          }
      })
  });
  
});

＆＃13;

#progressbar {
  width:50%;
  background:green;
  height:auto;
  margin-bottom:10px;
  display:none;
  }

#form-section {
  background: #eee;
  padding:10px;
  }

＆＃13;

<div id="progressbar">progressbar</div>

...there are many elements between progressbar and section...<br><br>

<div id="form-section">
  <h3>form section heading</h3>
  <input type="checkbox" value="check1"/><label>check1</label>
  <p><div class="inner-section"/>
  <input type="radio" name="radio1"/><label>radio1</label>
  <input type="checkbox" name="check2"/><label>check2</label>
  
  </p><span>some content</span></div>
  
  ...many nested elements inside the section
</div>

＆＃13;

此代码有效，但在我看来，进度条仅在直接点击表单部分div时显示，但不会在其任何子项上显示。可以吗？

更新：现在我又做了一些研究，发现这个答案在我的网站上运行良好：https://stackoverflow.com/a/7385673/5063672

Answer 1

尝试将事件绑定到表单节元素，如下所示：

 $(document).on('click', function(e) {
     if ($('#progressbar').is(":visible")){
         if !(e.target == $('#form-section') || e.target.parents('#form-section').length)
             $('#progressbar').hide();
         }
    }
}

应该绑定到所有子元素。我无法通过单击该区域外部来关闭它的好方法，下面的代码可能有用，但我无法测试它。它很难看。

{{1}}

获取e.target.id的所有孩子？

1 个答案: