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事件。您还必须将$(this)的实例更改为$(this).parent()或$(this).closest('.signup-button')。

Updated Example

$(".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是对点击元素的引用，您还可以使用event.target方法检查.is()是否为按钮元素：

Updated Example

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

单击隐藏/显示div

2 个答案: