jquery - 如何在完整文档上触发点击事件时忽略子字段

Question

这是我用于切换 div 的代码，我希望我的名为 #credits 的 div 在单击文档的其他部分时应该切换，此代码运行完美但存在一个问题，即当我单击此 div 的形式时，时间它也切换。请帮我阻止它。

$(document).ready(function() {
  $('#add_stu').click(function() {
    $('#credits').slideToggle("slow");
  });
  $(document).click(function(e) {
    if (!$(e.target).parents().andSelf().is('#add_stu')) {
      $("#credits").slideUp("slow");
    }
  });
});

#credits {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary pull-right " id="add_stu" style="margin-bottom: 10px;"><b>Add Student</b>
</button>
<div id="credits" class="bg-white padded poop text-center">
  <!-- The user image in the menu -->
  <form action="#" class="form-horizontal">
    <div class="form-group field_wrapper text-center">
      <div>
        <input class="form-control " placeholder="First Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper text-center">

      <div>
        <input class="form-control " placeholder="Last Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper">
      <select class="form-control">
        <option selected value="val0">Add Student to a room</option>
        <option value="val1">Room A</option>
        <option value="val2">Room B</option>
        <option value="val3">Room C</option>
      </select>
    </div>
    <button class="btn btn-primary" type="submit" style="width:100%;">Create Student</button>
  </form>
</div>

Answer 1

尝试以下条件:

使用 closest() 检查点击的元素是否不是按钮或 credits 元素的子元素

$(document).ready(function() {

  $('#add_stu').click(function() {
    $('#credits').slideToggle("slow");
  });
  $(document).click(function(e) {
    if (!($(e.target).closest('#add_stu').length || $(e.target).closest('#credits').length)) {

      $("#credits").slideUp("slow");
    }
  });

});

#credits {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn btn-primary pull-right " id="add_stu" style="margin-bottom: 10px;"><b>Add Student</b>
</button>
<div id="credits" class="bg-white padded poop text-center">
  <!-- The user image in the menu -->
  <form action="#" class="form-horizontal">

    <div class="form-group field_wrapper text-center">

      <div>
        <input class="form-control " placeholder="First Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper text-center">

      <div>
        <input class="form-control " placeholder="Last Name" type="text" value="">
      </div>
    </div>
    <div class="form-group field_wrapper">
      <select class="form-control">
        <option selected value="val0">Add Student to a room</option>
        <option value="val1">Room A</option>
        <option value="val2">Room B</option>
        <option value="val3">Room C</option>
      </select>

    </div>
    <button class="btn btn-primary" type="submit" style="width:100%;">Create Student</button>
  </form>
</div>