jQuery 手风琴错误答案

【问题标题】：jQuery accordion bugjQuery 手风琴错误
【发布时间】：2012-11-06 15:58:57
【问题描述】：

在页面加载时手风琴应该被折叠...但是在页面加载时它被展开了，我不知道如何修复这个错误？

$(document).ready(function()
{
    //Add Inactive Class To All Accordion Headers
    $('.accordion-header').toggleClass('inactive-header');

    //Set The Accordion Content Width
    var contentwidth = $('.accordion-header').width();
    $('.accordion-content').css({'width' : contentwidth });

    //Open The First Accordion Section When Page Loads
    $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
    $('.accordion-content').first().slideDown().toggleClass('open-content');

    // The Accordion Effect
    $('.accordion-header').click(function () {
        if($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }

        else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
    });

    return false;
});

这是我的代码的jsFiddle example。

【问题讨论】：

你应该阅读“你的”代码 cmets

标签： jquery-ui jquery jquery-plugins jquery-selectors

【解决方案1】：

从您的示例中删除以下代码部分，它将按您期望的方式工作：

//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');

jsFiddle Working Example

【讨论】：

【解决方案2】：

对我来说，只是将 display: none 添加到手风琴内容 div 似乎可以解决问题：

$('.accordion-content').css({'width' : contentwidth }).css('display':'none');

这是一个实际的演示：http://jsfiddle.net/YsY7n/1/

【讨论】：