jQuery切換幫助

Question

目前，單擊h2標籤可以用slideToggle切換div。但是，我試圖淡入和出h2標籤中的.hint_text_heading。所以，最初，我至少試過要做什麼，我將一個.active類添加到打開的h2標記中，然後在.hint_text_heading中淡出。但是，當我關閉div時，我無法使.hint_text_heading淡出。

有什麼建議嗎？謝謝！

HTML

<h2 class="collapsible_head">This is a title.<span class="hint_text_heading">This is a hint.</span></h2> 
<div> 
    This is the toggled content. 
</div> 

jQuery的

$(document).ready(function(){ 
    $('span.hint_text_heading').hide(); 
    $('h2.collapsible_head').click(function() { 
     $(this).next().slideToggle('slow'); 
     $(this).toggleClass('active'); 
     $('h2.active span.hint_text_heading').fadeIn(); 
    }).next().hide(); 
}); 

UPDATE/

下面是的jsfiddle一個例子。正如你所看到的，div切換和提示文本淡入，但是，當div被隱藏時，提示文本仍然存在。我試圖讓淡出：

http://jsfiddle.net/UGHgx/

Answer 1

我認爲這是你想要什麼：

CSS：

span.hint_text_heading { display: none; } 

的jQuery：

$('h2.collapsible_head').click(function() { 
    $(this).next().slideToggle('slow'); 
    //$(this).toggleClass('active'); 
    $('span.hint_text_heading', this).fadeToggle(); 
}).next().hide(); 

Answer 2

如何：

$(function(){ /* shorthand for $(document).ready(function(){ */ 

    $('span.hint_text_heading').hide(); 
    $('h2.collapsible_head').click(function() { 

     $(this).next().slideToggle('slow'); 
     $(this).toggleClass('active'); 
     $('h2.active span.hint_text_heading').fadeIn(); 
     $('h2:not(.active) span.hint_text_heading').fadeOut(); 

    }).next().hide(); 

}); 

編輯：
我也建議刪除$('span.hint_text_heading').hide();，只是把display:none;作爲一種風格，這是額外的JavaScript不需要的地方。

Answer 3

你想要這個;

$(document).ready(function(){ 
    $('span.hint_text_heading').hide(); 
    $('h2.collapsible_head').click(function() { 
     $(this).children('.hint_text_heading').fadeOut().end().next().slideToggle('slow'); 
     $(this).toggleClass('active'); 
     $('h2.active span.hint_text_heading').fadeIn(); 
    }).next().hide(); 
}); 

如果不是，請評論我，我會盡力給你解決方案。

Answer 4

那麼，快速和骯髒的解決方案：

http://jsfiddle.net/CpVSC/12/

$('span.hint_text_heading').hide(); 
$('h2.collapsible_head').click(function() { 

    $(this).next().slideToggle('slow'); 
    if($(this).hasClass('active')){ 
      $('.hint_text_heading').fadeOut(); 
     }else{ 
    $('span.hint_text_heading',this).fadeIn(); 
} 
    $(this).toggleClass('active'); 
}).next().hide(); 

Answer 5

工作代碼（測試）：

$(document).ready(function() { 
    $('h2.collapsible_head').click(function() { 
     $('h2.active span.hint_text_heading').hide(); 
     $(this).next().slideToggle('slow'); 
     $(this).toggleClass('active'); 
     $('h2.active span.hint_text_heading').fadeIn(); 
    }).children().hide().end().next().hide(); 
}); 

這裏的小提琴： http://jsfiddle.net/UGHgx/3/

Answer 6

我將與動畫回調去。 例如：http://jsfiddle.net/X99Z6/