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

回答

相關問題