标签: accordion

如何在表单加载时使jquery UI手风琴开始折叠.这有什么JavaScript代码吗？

我正在使用JQuery Accordion.我在这里有这个页面:http://www.hauppauge.com/site/support/support_colossus.html#tabs-6

发生的事情是自动高度需要一些时间来加载,在加载之前,内容下面有很多空白区域.当它最终加载时,高度将扩展为更长,然后捕捉到内容的正确高度.有没有办法让它无缝衔接？我只想点击一个Accordion标签,让它平滑地扩展到内容的确切高度.

2014年8月8日更新:

使用heightStyle: "content",如果你正在使用1.9版及更高版本(塔伦的答案)

使用autoHeight: false了1.8和更低(iappwebdev的答案)

我有这行代码:

$('#sitesAccordion .groupOfSites').click(function() {
    var lastOpenSite = $(this).siblings().hasClass(':not(.closedTab)');
    console.log(lastOpenSite);
});

我得到"假"而不是获得其他元素之一(假设有一个 - 并且必须有).我猜问题是:

.hasClass(':not(.closedTab)');

问题是什么？

我的目的是创建自己的手风琴(不使用jQuery UI)

而我正试图这样写:

$('#sitesAccordion .groupOfSites').click(function() {

    //Get the last opened tab
    var lastOpenSite = $(this).siblings().hasClass(':not(.closedTab)');

    //Close last opened tab and add class
    lastOpenSite.hide().toggleClass('closedTab');

    //Open the current Tab
    $(this).children('.accordionContent').toggle('fast');

    // remove class from open tab
    $(this).toggleClass('closedTab');


});

这是最好的方法吗？谢谢,Alon

我正在尝试使用Bootstrap 3创建一个手风琴,使用可折叠的数据属性按钮,没有手风琴标记.它对我来说看起来更干净.

但是我无法使data-parent属性起作用.我想在打开一个问题时,其他所有人都要关闭.我正在阅读文档(http://getbootstrap.com/javascript/#collapse-usage),但仍然无法使其工作.

我正在使用以下代码:

<div class="accordion" id="myAccordion">
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-1" data-parent="#myAccordion">Question 1?</button>
    <div id="collapsible-1" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#collapsible-2" data-parent="#myAccordion">Question 2?</button>
    <div id="collapsible-2" class="collapse">
    <p>Etiam posuere quam ac quam. Maecenas aliquet accumsan leo. Nullam dapibus fermentum ipsum. Etiam quis quam. Integer lacinia. Nulla est.</p>
    </div>
    <button type="button" class="btn btn-danger" data-toggle="collapse" …

我试图使用手风琴和折叠插件使用Twitter引导程序来模仿Outlook栏,到目前为止我得到了崩溃和手风琴的工作,但它目前允许折叠所有部分.

我想限制它,以便始终显示一个且仅一个.

这是我正在研究的那个:http://jsfiddle.net/trajano/SMT9D/我觉得它在某个地方沿着

$('#accordions').on('hide', function (event) {
  console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop");
})

在我的UI中,我有一个像这样的手风琴设置:

<div id="object_list">
    <h3>Section 1</h3>
    <div>...content...</div>

    // More sections
</div>

手风琴在首次成型时可以正常工作,并且它似乎可以很好地适应每个部分内的内容.但是,如果我在.accordion()调用之后(通过ajax)在手风琴中添加更多内容,则该节的内部最终会溢出.

由于手风琴的形成几乎没有任何内容,所有的内部div都非常小,因此内容溢出,你手里拿着带有滚动条的手风琴,几乎没有观看区域.

我试图将最小高度样式添加到object_list div,并且内容divs无效.将min-height添加到内部div有点工作,但它搞砸了手风琴的动画,并将它添加到object_list div完全没有.

即使没有足够的内容填充这些部分,如何从内容部分中获得合理的大小？

我在项目中使用jQuery UI Accordion(一次不允许打开多个项目).利用手风琴,因为我通常是合适的就只需要一次一个打开的面板.

但是,我需要提供一个"全部展开"链接,单击该按钮可切换到"全部折叠".我不想在这个要求周围自定义几乎相同的手风琴功能,所以我想要一些JS来实现这一点,同时保持Accordion组件的使用.

问题:在使用jQuery UI"Accordion"组件为标准功能提供支持的同时,需要哪些JavaScript/jQuery才能实现这一目标？

这是一个小提琴:http://jsfiddle.net/alecrust/a6Cu7/

奇怪的是,这里:

日期选择器的一个实例显示了一个奇怪的地方作为的左上角单杆此页面.

我在页面上使用jQuery UI的Datepicker和Accordion.在用于UI的CSS中,对于Accordion来说,display:nonefor Datepicker似乎被覆盖display:block,至少根据Firebug(参见下面的img).

然后,一旦在"餐饮/活动室"选项卡中单击了Datepicker触发器(单击其中一个按钮以使用Datepicker显示div),display:none似乎就可以了.

这是坏div的样子:

这是Firebug面板:

使用jQuery手风琴控件,如何让它滚动到我离开屏幕时选择的项目？

什么时候:

• 我的手风琴项目的内容大于可视窗口
• 我向下滚动到第二个手风琴项目
• 我点击第二个手风琴项目来显示它
• 第一个手风琴选项折叠,第二个手风琴选项打开,但滑出屏幕.

手风琴是否可以选择滚动到第二个项目？

我在一个html页面中使用jQuery AutoComplete插件,我也有一个使用原型的手风琴菜单.

它们都可以完美地分开工作,但是当我尝试在单个页面中实现这两个组件时,我得到了一个我无法理解的错误.

未捕获的异常:[Exception ..."组件返回失败代码:0x80004005(NS_ERROR_FAILURE)[nsIDOMViewCSS.getComputedStyle]"nsresult:"0x80004005(NS_ERROR_FAILURE)"location:"JS frame :: file:/// C:/ Documents and Settings /Administrator/Desktop/website/js/jquery-1.2.6.pack.js :: anonymous :: line 11"data:no]

我发现与jQuery冲突的文件是'effects.js',它是由手风琴菜单使用的.我尝试用更新版本替换此文件,但更新似乎打破了手风琴行为.

我的猜测是手风琴中使用的'effects.js'文件被修改以获得手风琴演示输出.我也尝试使用jQuery需要的重写方法来避免与其他库冲突,但是没有用.

我从stickmanlabs.com获得了手风琴演示.

并且jQuery AutoComplete可以从jQuery站点获得.

还有其他人遇到过这个问题吗？