超级简单的 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');
    });
});