jQuery的。點擊（）不點火的預期

Question

我想要實現的是：

• 用戶點擊一個H4格。提問
• 。提問的div擴大到90像素內，和它的子段滑入視圖通過將其margin-top設置爲0
• 當用戶第二次單擊h4元素時，.question div應該返回到35px高度，並且該段落應該將margin-top設置爲35px。

Here's a Fiddle

jQuery(document).ready(function($) { 
    $('.question h4').click(function() { 
     $(this).parents('.question').css('height', '90'); 
     $(this).siblings('p').css('margin-top', '0'); 
     $(this).parent().addClass('open'); 
    }); 

    $('.question.open h4').click(function() { 
     $(this).parent.removeClass('open'); 
     $(this).parents('.question').css('height', '65px'); 
     $(this).siblings('p').css('margin-top', '35px'); 
    }); 
}); 

Answer 1

你真的只需要一個處理程序：

$('.question h4').click(function() { 
    if ($(this).is('.open h4')) { 
     $(this).parent.removeClass('open'); 
     $(this).parents('.question').css('height', '65px'); 
     $(this).siblings('p').css('margin-top', '35px'); 
    } 
    else { 
     $(this).parents('.question').css('height', '90'); 
     $(this).siblings('p').css('margin-top', '0'); 
     $(this).parent().addClass('open'); 
    } 
}); 

你的第二個處理程序分配什麼也不做，因爲沒有你的<h4>元素開始與「開放」級（或者，至少，我懷疑他們別）。

Answer 2

你第一次點擊處理程序被燒成即使.question爲.open。您需要從第一個選擇器中排除.open。

$('.question:not(.open) h4').click(... 

Answer 3

正如Pointy所提到的，您只需要一個帶有條件語句的處理程序。另外，爲了速度，開銷和簡單性，我會考慮將節點上所有需要的操作串成一行（即，任何你想對$（this）.parent（）進行的操作都應該串在一起，這樣jQuery只需要解析DOM一次）。

$('.question h4').click(function() { 
    if (!$(this).parent().hasClass('open')){ 
     $(this).parents('.question').css('height', '90').addClass('open'); 
     $(this).siblings('p').css('margin-top','0'); 
    }else{ 
     //$(this).parents('.question').css('height', '65px'); 
     $(this).parent().css('height', '65px').removeClass('open'); 
     $(this).siblings('p').css('margin-top', '35px'); 
    } 
});