Question

我正在使用JQM collapsibleset小部件。

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

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

 $("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都使用相同的小部件工厂和事件机制。

Answer 1

在jQuery Mobile 1.3.2中，该事件称为collapsibleexpand，确实可以防止其默认行为。

你只需写：

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

Answer 2

Here是JQM在Github上的解决方案：

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

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

Answer 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
});

如何防止jQuery Mobile可以扩展？

3 个答案: