如何防止 jQuery Mobile 可折叠扩展？答案

【问题标题】：How to prevent a jQuery Mobile collapsible from expanding?如何防止 jQuery Mobile 可折叠扩展？
【发布时间】：2013-09-03 09:36:31
【问题描述】：

我正在使用 JQM collapsibleset 小部件。

我需要一个可折叠的按钮（它允许向集合/手风琴添加更多元素），所以当它被点击时，它不应该展开（或折叠）。

我使用以下代码无济于事：

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

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

我将 collapsibleexpand 和 collapsiblebeforeexpand 自定义事件添加到 JQM 以测试这是否有帮助。

我可以注册所有事件并且返回 false 也确实会阻止控制台被触发。但是...可折叠的仍然展开... :-(

我认为添加 beforeexpand 事件会阻止 JQM 中的后续代码在事件上调用 preventDefault 时运行，但它仍然执行。

问题：
如何通过阻止执行在扩展 javascript 运行之前触发的事件来阻止可折叠组件正确扩展？

PS：我也使用 jQueryUI 进行标记，因为 JQM 和 UI 都使用相同的小部件工厂和事件机制。

【问题讨论】：

jqm 1.4a2 不听collapse 和expand jsfiddle.net/Palestinian/HXAU6
@Omar: 根据latest 代码有expand 和collapse 事件（查找this._trigger( isCollapse ? "collapse" : "expand" );
谢谢，我去查一下。

标签： javascript jquery jquery-ui jquery-mobile preventdefault

【解决方案1】：

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

你只需要写：

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

【讨论】：

@frequent，确实，我查看了源代码并且 1.4a2 不会检查 collapse 和 expand 事件是否已经被默认阻止了。虽然这在更改列表中没有提到，所以它可能会在 1.4 中修复。
即使在 jQM 1.3.2 中我也无法使用它，该事件似乎只是被称为“扩展”。谁能告诉我为什么我在这里上锁一次后无法再次锁定它：jsfiddle

【解决方案2】：

Here 是 Github 上 JQM 的解决方案：

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

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

【讨论】：

这个应该在加载jqm之前添加？
没有。把它放在extensions.js之类的文件中，然后加载它，因为你正在添加到小部件，所以它需要加载
我不能让它工作，你之后如何注册事件？您是否必须以某种方式修改可折叠设备？我根本看不到事件（假设它被称为 collapsiblebeforeexpand :-)
代码错误。 “collapsiblebefore”应该读作“before”。然后使用on方法绑定“collapsiblebeforeexpand”或“collapsiblebeforecollapse”
@DaveNottage：那是不久前的事了。此后 JQM 代码已更改，因此请随时发布正确答案。

【解决方案3】：

根据频繁的回答，这是适合 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
});

【讨论】：