jQuery正确切换div

我有一个问题和答案部分，我只想一次打开一个问题。所以如果你有1个问题打开（答案是可见的），那么其他答案将被关闭。我无法找到一种方法来关闭打开的div本身。jQuery正确切换div

示例（说明）：如果您单击Question1，Answer1会显示。如果再次单击Question1 Answer1不会隐藏（它应该）。一次只能显示一个答案。 “活跃”类只能应用于未解决的问题，而不能从开放的问题中移除。

这里是我到目前为止已经做了demo：

$('.tab-body').hide(); 

$('.tab-head').click(function() { 

$('.tab-body').hide(); 
$(this).parents('.tab-faq').find('.tab-body').slideToggle(); 

$('.tab-head').removeClass('active'); 
$(this).addClass('active'); 

});

来源

2014-03-25 mtt

什么你需要什么？演示正在运行完美 –

它看起来像你的演示按预期工作。你指的是什么'div'关闭？ –

说你点击问题1.我想当你再次点击它来结束Answer1。现在没有这样做。 – mtt

$('.tab-body').hide(); 

$('.tab-head').click(function() { 
$('.tab-head').removeClass('active'); 

$('.tab-body').slideUp(); // Close all 
var bb = $(this).parents('.tab-faq').find('.tab-body'); 
if(bb.is(":visible")){ 
    bb.slideUp(); 
} else { 
    bb.slideDown(); 
    $(this).addClass('active'); 
} 
});

http://jsfiddle.net/effone/9hBnk/12/

来源

2014-03-25 08:45:34 effone

这很适合我。谢谢！ – mtt

修改的课程添加。请检查。 – effone

$('.tab-body').hide(); 

$('.tab-head').click(function() { 
    if ($(this).hasClass('active')) { 

     $(this).parents('.tab-faq').find('.tab-body').slideToggle(); 
     $('.tab-head').removeClass('active'); 
    } else { 
     $('.tab-body').hide(); 
     $(this).parents('.tab-faq').find('.tab-body').slideToggle(); 

     $('.tab-head').removeClass('active'); 
     $(this).addClass('active'); 
    } 
});

不需要在点击隐藏;

*的div的编辑其余部分将滑下

来源

2014-03-25 08:43:07 Shikiju

在这种情况下，打开另一个问题不会关闭上一个问题。我只需要一个答案就可以看到。 – mtt

尝试

$('.tab-body').hide(); 

$('.tab-head').click(function() { 
    var x=$(this).parents('.tab-faq').find('.tab-body'); 
    $('.tab-body').not(x).hide(); 
    $(this).parents('.tab-faq').find('.tab-body').slideToggle(); 
    $('.tab-head').removeClass('active'); 
    $(this).addClass('active'); 
});

Demo

来源

2014-03-25 08:46:46

你可以这样做：

$('.tab-body').hide(); 
$('.tab-head').click(function() { 
    var tabBody = $(this).next(); 
    tabBody.slideToggle(); 
    $('.tab-body').not(tabBody).slideUp(); 
    $('.tab-head').removeClass('active'); 
    $(this).addClass('active'); 
});

Updated Fiddle

来源

2014-03-25 08:47:58 Felix

谢谢您的选择。 – mtt

不客气的兄弟:-) – Felix

你的代码有道理。棒极了 - @Felix –

这里是我可以给你，我想简单的答案。

这里是你的jQuery：

$('.tab-body').hide(); 
$('.tab-head').click(function() { 
    if($(this).hasClass('active')) { 
     $(this).parents('.tab-faq').find('.tab-body').slideToggle(); 
     $(this).removeClass('active'); 
    } else { 
     $('.tab-body').hide(); 
     $(this).parents('.tab-faq').find('.tab-body').slideToggle(); 

     $('.tab-head').removeClass('active'); 
     $(this).addClass('active'); 
    } 

});

Demo

来源

2014-03-25 08:48:24 Biwaa

$('.tab-head').click(function() { 

if ($(this).parents('.tab-faq').find('.tab-body').css("display") == "none") { 
    $('.tab-faq').find('.tab-body').slideUp(); 
    $(this).parents('.tab-faq').find('.tab-body').slideDown(); 
} 
    else 
    { 
      $(this).parents('.tab-faq').find('.tab-body').slideUp(); 
    } 

    $('.tab-head').removeClass('active'); 
    $(this).addClass('active'); 

});

演示：

http://jsfiddle.net/9hBnk/11/

来源

2014-03-25 08:52:28 RGS

jQuery正确切换div

回答

相关问题