单击隐藏/显示div

Question

我创建了一个脚本，当单击一个按钮时，它会显示其下面的所有内容并隐藏其他按钮内容。 我遇到的唯一问题是我想要重构脚本， 这样只有按下按钮才能工作 ，而不是按钮所在的整个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>

jQuery的：

(function($) {

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

})(jQuery);

JSFiddle： https ：//jsfiddle.net/v6bmphct/3/

Answer 1

一种选择是将事件监听器直接附加到后代按钮元素。 这样， click其他内容时不会触发click事件。 您还必须将$(this)实例更改为$(this).parent()或$(this).closest('.signup-button') 。

更新的示例

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

或者，由于event.target是对单击元素的引用，您还可以使用.is()方法检查event.target是否为按钮元素：

更新的示例

$(".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();
  }
});

Answer 2

看一下这个：

(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);