javascript - jQuery 切换帮助

Question

目前，单击 h2 标签可使用 slipToggle 切换 div。但是，我还尝试淡入和淡出 h2 标记中存在的 .hint_text_heading 。因此，最初，我至少尝试做的是，我向打开的 h2 标记添加一个 .active 类，然后在 .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();
});

更新/

这是 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();