Javascript 单击隐藏/显示div

我创建了一个脚本，当单击一个按钮时，它会显示它下面的所有内容，并隐藏其他按钮的内容。我遇到的唯一问题是，我想重构脚本，这样它只有在按下按钮时才能工作，而不是按钮所在的整个div，因为它会引起一些混乱。这样做最好的方式是什么

<div class="signup-button">
  <button type="button" class="btn btn-default">Subscribe</button>
  <div class="signup-form" style="display:none;">
    Content
  </div>
</div>

<div class="signup-button">
  <button type="button" class="btn btn-default">Subscribe</button>
  <div class="signup-form" style="display:none;">
    Content
  </div>
</div>

<div class="signup-button">
  <button type="button" class="btn btn-default">Subscribe</button>
  <div class="signup-form" style="display:none;">
    Content
  </div>
</div>

<div class="signup-button">
  <button type="button" class="btn btn-default">Subscribe</button>
  <div class="signup-form" style="display:none;">
    Content
  </div>
</div>

---

jsidle:

一个选项是将事件侦听器直接附加到子体按钮元素。这样，单击其他内容时不会触发

单击

事件。您还必须将

$（this）

的实例更改为

$（this）.parent（）

或

$（this）.closest（'.signup按钮'）

或者，由于

event.target

是对已单击元素的引用，您也可以使用

.is（）

方法检查

event.target

是否是按钮元素：

看看这个：

(function($) {

  $(".signup-button").find('button').on('click', function() {
    $(this).siblings(".signup-form").toggle("slow");
    $(".signup-button").not(this.closest(".signup-button")).find(".signup-form").hide();
  });

})(jQuery);

---

首先将jquery中的

.signup按钮

更改为

.signup按钮

，您就应该完成了

$(".signup-button .btn").on('click', function(e) {
  $(this).parent().find(".signup-form").toggle("slow");
  $(".signup-button").not($(this).parent()).find(".signup-form").hide();
});

$(".signup-button").on('click', function(e) {
  if ($(e.target).is('.btn')) {
    $(this).find(".signup-form").toggle("slow");
    $(".signup-button").not(this).find(".signup-form").hide();
  }
});

(function($) {

  $(".signup-button").find('button').on('click', function() {
    $(this).siblings(".signup-form").toggle("slow");
    $(".signup-button").not(this.closest(".signup-button")).find(".signup-form").hide();
  });

})(jQuery);