使用GWTQuery调用Bootstrap JS折叠方法

Question

我想在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");

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解决方案

你可以达到同样的＆＃34;手风琴＆＃34;使用slideUp()，slideDown()和slideToggle() 函数方法生效。要打开所有折叠的元素，只需在其上调用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()就行了，我猜你的情况就是这样。