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手风琴菜单 跪求图面上面这种JQ手风琴效果,带排行的。。。