使用GWTQuery调用BootstrapJS的崩溃方法

Question

我想在 gQuery 中复制此 jQuery 调用以立即打开所有关闭的手风琴面板：

$('.panel-collapse:not(".in")').collapse('show');

我已经在我的应用程序上测试过它并且它有效，但是我无法使用 gQuery 成功实现相同的逻辑来调用 JavaScript 折叠方法：

@Override
public void onClick(ClickEvent event) {
  GQuery.$(".panel-collapse").not(".in").trigger("collapse", "show");
}

从 gQuery 调用 JavaScript 方法的正确方法是什么？

更多信息 - 我已经在我的 onClick 方法中成功测试了这个 gQuery 代码，以向受影响的 div 添加测试 class - 所以我确定上述查询的选择器部分有效：

GQuery.$(".panel-collapse").not(".in, .MENU").addClass("test");

Answer 1

为什么不能将 collapse 与 GQuery

一起使用

IIRC collapse() 不是 jQuery API 方法。也许你正在使用 Bootstrap JS，或者一些提供此功能的 jQuery 插件，但它不是 jQuery API 方法之一，因此 GQuery 不提供它。

为什么 trigger 也不行

GQuery 或 GwtQuery 不是 jQuery 的包装器，而是 jQuery API.
的完整 Java 实现 这意味着，当你做这样的事情时：

GQuery.$(".panel-collapse").not(".in").slideToggle();

您不是调用jQuery的$()、not()或slideToggle()；您正在使用 Java 库来获得相同的结果。
这就是为什么尝试 trigger("slideToggle") 之类的方法不起作用的原因：因为 a) slideToggle() 不是事件，而是函数； b) GQuery 不使用 jQuery 的 JS 函数。

GQuery 解决方案

您可以使用 slideUp()、slideDown() 和 slideToggle() functions 方法实现相同的“手风琴”效果。要打开所有折叠的元素，只需对它们调用 slideDown() 即可：

GQuery.$(".panel-collapse").not(".in").slideDown();

要获得完整的手风琴效果，请将它们与 toggleClass() 和 removeClass() 方法结合使用，以标记哪些元素是打开/关闭的，以便您知道在单击时切换哪些元素。

原生解决方案collapse()

现在，如果您不介意建议...GQuery 很棒，但动画远不如原生 jQuery 中的流畅。我想 Bootstrap.
也会发生同样的情况 如果可以（我看不出你不能这样做的原因），只需使用 JSNI 像这样对 collapse() 进行本地调用：

private native void collapseAll() /*-{
    $wnd.$('.panel-collapse:not(".in")').collapse('show');
}-*/;

这需要您在页面中加载 jQuery（或 Bootstrap），但既然您说在纯 JS 中调用 collapse() 有效，我想这就是您的情况。