如何以编程方式打开/折叠 GWT Bootstrap Accordion答案

【问题标题】：How to open/collapse GWT Bootstrap Accordion programmatically如何以编程方式打开/折叠 GWT Bootstrap Accordion
【发布时间】：2013-07-15 08:45:00
【问题描述】：

任何人都可以提及如何以编程方式打开/折叠引导手风琴。这是我用于 ACCORDION 小部件的 uibinder xml。我想把它折叠成我的 uibinder java 类。

<b:Accordion>
<b:AccordionGroup heading="COMPARE" ui:field="compareAccordion">
    .
    .
    .
</b:AccordionGroup>                     
</b:Accordion>

【问题讨论】：

标签： gwt twitter-bootstrap accordion collapse

【解决方案1】：

当我遇到这个问题时，我的手风琴会在调用 hide() 或 show() 后锁定。我发现我必须将 hide() 和 show() 放在一个延迟命令中：

void expandAndCollapseGroups(final Collection<AccordionGroup> expand,
        final Collection<AccordionGroup> collapse) {
    Scheduler.get().scheduleDeferred(new Scheduler.ScheduledCommand() {
        @Override
        public void execute() {
            for (AccordionGroup accordionGroup : expand) {
                accordionGroup.show();
            }
            for (AccordionGroup accordionGroup : collapse) {
                accordionGroup.hide();
            }
        }
    });
}

【讨论】：

【解决方案2】：

好的，请看这里：

http://twitter.github.io/bootstrap/javascript.html#collapse

$(".collapse").collapse();

关于如何在 GWT 中使用该 Javascript 代码，请查看this question 以及其中提到的ScriptInjector 的链接..

编辑：做了一些研究，你应该检查你的标记，以确保你真的在使用上面那个 Twitter Bootstrap 链接中提到的可折叠。如果没有，请尝试Collapse class。

【讨论】：

【解决方案3】：

compareAccordion.show() 打开和compareAccordion.hide() 折叠应该可以工作。

【讨论】：

【解决方案4】：

我用过：

$('#collapse_id').collapse('show');

而且效果很好，和点击完全一样：

<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse_id">
  Collapsible Group Item #1
</button>

我在一组可折叠的 div（手风琴）中使用它，它的行为正常（打开一个将关闭最近打开的）

【讨论】：