jQuery 手风琴错误

Posted

技术标签:

【中文标题】jQuery 手风琴错误【英文标题】:jQuery accordion bug 【发布时间】: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 【参考方案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/

【讨论】:

以上是关于jQuery 手风琴错误的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 手风琴不会删除单击上一个手风琴的类

Jquery - 手风琴褪色

jQuery手风琴菜单 跪求图面上面这种JQ手风琴效果,带排行的。。。

Jquery手风琴高度溢出

与 mmenu 冲突的 JQuery 手风琴菜单 - JQuery 1.4 与 1.7

一个用于jQuery的轻量级水平手风琴插件。