Question

我遇到了jQuery UI手风琴小部件的问题。在下面的网站上，在初始页面加载后单击Today。 Accordion是通过Ajax加载的。

http://opencalendars.com/alpha/v0.9.1/event.php

当我使用函数直接在启动时加载该选项卡时，似乎可以正常工作。

http://opencalendars.com/alpha/v0.9.1/event.php?p=2

以下是我正在使用的选项...

$( ".accordion" ).accordion({'fillSpace': true,
'clearStyle': true });

知道这里有什么问题吗？

Answer 1

你的问题似乎在这里：

$( "#tabs" ).tabs({ selected: $.getUrlVar('p'), cache: true, spinner: 'Retrieving data...',fx: { opacity: 'toggle' }  }

由于您从URL获取selected的值，因此未定义且默认为0.尝试将其默认为1：

var selectedTab = $.getUrlVar('p') || 1;
$( "#tabs" ).tabs({ selected: selectedTab, cache:...

Answer 2

在标签之前实例化手风琴。问题在于，当你要求它制作手风琴时，它们已被标签“隐藏”，因此手风琴无法正确计算高度。他们错误地认为他们没有内容。

jsFiddle of Tabs before Accordions

jsFiddle of Accordions before Tabs but with 'filSpace':true

jsFiddle of Accordions before Tabs WINNAR

请注意，第一个示例遇到了同样的问题。只需翻转你的两行

$( ".accordion" ).accordion({clearStyle: true  });
$( "#tabs" ).tabs({ selected: selectedTab, cache: true, spinner: 'Retrieving data...',fx: { opacity: 'toggle' }  }
        ).find( ".ui-tabs-nav" ).sortable({ axis: "x" });

Answer 3

添加选项

autoHeight: false

jQuery UI手风琴的问题

3 个答案: