如何防止jQuery Mobile可折叠元素的展开？

Question

我在使用JQM折叠集小部件。

我需要一个折叠项只是一个按钮（允许添加更多元素到集合/手风琴），因此当它被点击时，它不应该展开（或折叠）。

我尝试使用下面的代码，但没有成功：

 $("div.ui-dynamic-tabs div.tab_add").on("collapsiblebeforeexpand", function (e) {

      e.stopPropagation();
      e.stopImmediatePropagation();
      e.preventDefault();
      return false;
      console.log("foo");
 });

使用我添加到JQM中的collapsibleexpand和collapsiblebeforeexpand自定义事件来测试是否有帮助。我可以注册所有事件，并且返回false也确实可以防止控制台被触发。然而......可折叠面板仍然会展开... :-( 我认为添加一个beforeexpand事件将阻止在调用preventDefault时运行JQM内部代码，但它仍然会执行。问题：如何通过防止展开javascript运行之前触发的事件来正确停止可折叠面板的展开？PS：我还标记了jQueryUI，因为JQM和UI都使用相同的小部件工厂和事件机制。

- frequent

---

jqm 1.4a2没有监听collapse和expand事件 http://jsfiddle.net/Palestinian/HXAU6/ - Omar

@Omar：根据最新代码，有expand和collapse事件（查找this._trigger( isCollapse ? "collapse" : "expand" );）。 - frequent

谢谢，我会查一下的。 - Omar

Answer 1

在jQuery Mobile 1.3.2中，该事件被称为collapsibleexpand，它的默认行为确实可以被阻止。

你只需要编写：

$("div.ui-dynamic-tabs div.tab_add").on("collapsibleexpand", function(e) {
    e.preventDefault();
});

- Frédéric Hamidi

---

@frequent，确实，我查看了源代码，1.4a2版本不再检查collapse和expand事件是否已被默认阻止。虽然这在变更列表中没有提到，但也许在1.4正式版中会得到修复。 - Frédéric Hamidi

我甚至在 jQM 1.3.2 中都无法使其工作，该事件似乎只被称为“expand”。有人能告诉我为什么在这里解锁一次后我不能再次锁定它吗：jsfiddle。 - mwil.me

Answer 2

这里是JQM在Github上的解决方案:

$.widget( "mobile.collapsible", $.mobile.collapsible, {
  _handleExpandCollapse: function( isCollapse ) {
    if ( this._trigger( "collapsiblebefore" +
      ( isCollapse ? "collapse" : "expand" ) ) ) {

          this._superApply( arguments );
     }
    }
});

- frequent

---

在加载jqm之前应该添加这个。 - Omar

不要进行解释。将其放入文件中，例如extensions.js，并在之后加载，因为您正在添加到小部件，所以需要加载它。 - frequent

我无法让它工作，之后如何注册事件？您必须以某种方式修改可折叠内容吗？我根本看不到事件（假设它被称为 collapsiblebeforeexpand :-)）。 - mwil.me

代码有误。"collapsiblebefore" 应该改为 "before"。然后使用 on 方法绑定 "collapsiblebeforeexpand" 或 "collapsiblebeforecollapse"。 - Dave Nottage

@DaveNottage：那是一段时间以前的事了。JQM代码已经改变，所以请随意发布正确答案。 - frequent

Answer 3

根据frequent的答案，这是适用于JQM 1.4的修改：

$.widget('mobile.collapsible', $.mobile.collapsible, {
  _handleExpandCollapse: function(isCollapse) {
    if (this._trigger('before' + (isCollapse ? 'collapse' : 'expand'))) {
      this._superApply(arguments);
    }
  }
});

绑定事件：

$('#mycollapsible div').on('collapsiblebeforeexpand', function(event, ui) {
  if (someCondition)
    event.preventDefault(); // prevent node from expanding
});

- Dave Nottage