0

我想在 gQuery 中复制这个 jQuery 调用来一次打开所有关闭的 Accordion 面板：

$('.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 添加一个测试类 - 所以我确定上述查询的选择器部分有效：

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

1 回答 1

1

为什么不能collapse与 GQuery 一起使用

IIRCcollapse()不是 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），但是既然您说collapse()在普通 JS 中调用是有效的，我想这就是您的情况。

于 2017-02-01T17:23:07.287 回答