的HTML

Question

目前，点击h2标签可以使用slideToggle切换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();
});

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/

jQuery切换帮助

的HTML

的jquery

6 个答案: