Question

我有一个问题和答案的部分，我希望一次只打开一个问题。因此，如果您打开一个问题（答案可见），那么其他答案将被关闭。我无法找到一种方法来关闭开放的div本身。

示例（说明）：如果单击Question1，则答案1显示。如果再次单击Question1，则Answer1不会隐藏（它应该隐藏）。一次只能显示1个答案。等级＆＃39;活跃＆＃39;必须只应用于未解决的问题，并从普遍开放的问题中删除。

以下是我目前所做的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');

});

Answer 1

你可以这样做：

$('.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

Answer 2

$('.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将向下滑动

Answer 3

$('.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/

Answer 4

试

    $('.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

Answer 5

我认为这是我能给你的最简单的答案。

这是你的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

Answer 6

$('.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/

jQuery正确切换div

6 个答案: