超級簡單的jQuery選項卡 - 無UI - 在頁面加載時崩潰

Question

我希望所有選項卡在頁面加載時都被摺疊。現在，第一個是默認打開的：

$(document).ready(function($) { 
    $('#forms').find('.forms-toggle').click(function(){ 

     //Expand or collapse this panel 
     $(this).next().slideToggle('fast'); 

     //Hide the other panels 
     $(".forms-content").not($(this).next()).slideUp('fast'); 

    }); 
    }); 

HTML和CSS的位置：

https://jsfiddle.net/re8x8cx3/

Answer 1

廣場這裏面DOM已準備就緒，

$(".forms-content").hide(); 

然後代碼會，

$(document).ready(function($) { 
    $(".forms-content").hide(); 
    $('#forms').find('.forms-toggle').click(function() { 
    //Expand or collapse this panel 
    $(this).next().slideToggle('fast'); 
    //Hide the other panels 
    $(".forms-content").not($(this).next()).slideUp('fast'); 
    }); 
}); 

Fiddle

Answer 2

請也提高你的JS：

(function($){ 
    //store reusable global vars 
    var $forms = $('#forms'), 
     $formContents = $forms.find(".forms-content"); 

    //hide on load 
    $formContents.hide(); 

    //attach only on handler to #forms instead of to every tab separately 
    $forms.on('click', '.forms-toggle', function(event){ 
     event.preventDefault(); 

     //reuse this value (only on reference) 
     var $thisContent = $(this).next(), 

     //Expand or collapse this panel 
     $thisContent.slideToggle('fast'); 

     //Hide the other panels 
     $formContents.not($thisContent).slideUp('fast'); 
    }); 
});