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/