單擊隱藏/顯示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);