JQuery-Mobile 可折叠展开/折叠事件

Posted 2023-05-09

【中文标题】JQuery-Mobile 可折叠展开/折叠事件

【英文标题】：JQuery-Mobile collapsible expand/collapse event

【发布时间】：2012-01-14 01:16:46

【问题描述】：

除了标题的onclick 事件之外，有没有人知道任何其他方法来捕获扩展或折叠标有data-role="collapsible" 的组件的事件？

编辑：我想要某种事件，它还将提供有关组件展开/折叠状态的信息。

【参考方案1】：

collapsible 块有自定义事件。您可以绑定到expand 和collapse 事件：

$('#my-collapsible').bind('expand', function () 
    alert('Expanded');
).bind('collapse', function () 
    alert('Collapsed');
);

这是一个 jsfiddle：http://jsfiddle.net/6txWy/

【讨论】：

这正是我所需要的。非常感谢！ :)

注意：这是在 div 实际展开之前触发的。因此，如果在打开 div 后尝试获取 div 的位置，这将不起作用。

@Bot 你想做什么来获取 div 元素的位置（我假设你的意思是可折叠的内容区域）？

这行得通。谢谢你。奇怪，因为他们的文档声明 $('.selector').on('collapsibleexpand', function()); 和 collapsiblecollapse 类似。 :(

注意“可折叠”而不是“可折叠”:)

【参考方案2】：

在 jQuery Mobile 1.4 中有 collapsiblecollapse 和 collapsibleexpand 事件。 https://api.jquerymobile.com/collapsible/#event-collapse

$( ".selector" ).on( "collapsiblecollapse", function( event, ui )  );

【讨论】：

这对我有用，与接受的答案相反。

【参考方案3】：

你可以绑定任何你想要的事件，例如：

http://jsfiddle.net/9mDbh/ // 事件 http://jsfiddle.net/9mDbh/1/ // 触摸事件

演示：

http://jsfiddle.net/9mDbh/5/

JS

$("div:jqmData(role='collapsible')").each(function()
    bindEventTouch($(this)); 
);

function bindEventTouch(element) 
    element.bind('tap', function(event, ui) 
       if(element.hasClass('ui-collapsible-collapsed')) 
            alert(element.attr('id')+' is closed');
         else 
            alert(element.attr('id')+' is open');
        
    );

html

<div data-role="page" id="home">
    <div data-role="content">
        <div data-role="collapsible" id="number1">
           <h3>Header #1</h3>
           <p>I'm Header #1</p>
        </div>
        <br />
        <div data-role="collapsible" data-collapsed="false" id="number2">
           <h3>Header #2</h3>
           <p>I'm Header #2</p>
        </div>
    </div>
</div>

【参考方案4】：

我认为没有其他方法可以做到这一点。我不相信您可以在这种情况下使用animationComplete，如下所述：http://jquerymobile.com/test/docs/api/events.html

也许您可以在特定元素上使用某些类更改，这实际上并不比绑定标题的 onclick 事件更好。

【参考方案5】：

您可以尝试jQuery mobile 点击事件。我没有亲自使用过，但听说它类似于mousedown 事件处理程序。如果您提供更多关于 onclick 不起作用的原因的详细信息，也许我们可以为您提供更多帮助。

【讨论】：

onclick 有效。只是我想使用一些不同的东西，也许还会提供有关组件展开/折叠状态的信息。