Javascript jQuery切换帮助

当前，单击h2标记可使用slideToggle切换div。但是，我也尝试淡入淡出h2标记中存在的

.hint\u text\u标题

。因此，最初，我尝试做的至少是，在打开的h2标记中添加一个

.active

类，然后淡入

.hint\u text\u标题中。但是，当我关闭div时，我无法使
.hint\u text\u heading
淡出

有什么建议吗？谢谢

html
更新/

下面是JSFIDLE中的一个示例。如您所见，div切换，提示文本淡入，但是，当div隐藏时，提示文本保留。我正试图让它淡出：

这个怎么样：

$(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\u text\u heading'）.hide（）并仅放置
显示：无作为一种样式，这是不需要的额外javascript

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

如果没有，请评论我，我将尝试为您提供解决方案。
我认为这就是您想要的：

CSS:

span.hint_text_heading { display: none; }

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

jQuery:

span.hint_text_heading { display: none; }

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

那么，快速而肮脏的解决方案是：


工作代码（已测试）：

这是小提琴：
我将使用动画回调。
示例：
当您关闭div时，您的意思是什么？但是关闭div的事件是什么？第二次点击？是的@Kokos和@NeXXeuS在下面的回答是正确的。当有jQuery时，总会有办法的。谢谢。是的，这也有效，但Nexexeus的答案更加完整：）谢谢。谢谢，伙计，你的代码也帮助我获得了一些关于
fadeToggle（）
的知识。
$('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();

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