jQuery Mobile - 仅使可折叠小部件的某些部分处于活动状态

Posted 2023-05-09

【中文标题】jQuery Mobile - 仅使可折叠小部件的某些部分处于活动状态

【英文标题】：jQuery Mobile - Make only certain part of collapsible widget active

【发布时间】：2015-07-09 09:04:54

【问题描述】：

有没有人知道一种方法可以使可折叠小部件的特定部分实际切换可折叠部分？我一直试图解决这个问题好几个小时，但似乎无法理解。

基本上，我不希望整个<li> 触发展开/折叠，而只是右侧的一小部分区域。

谢谢。

【参考方案1】：

这是我的解决方案：

阻止默认事件 在右侧创建一个可点击的元素 管理展开/折叠状态

HTML

<div data-role="page" id="page">
    <div data-role="content">
        <div data-role="collapsible" data-inset="false" data-collapsed="true">
            <h1>Title <span class="clickme">Click me</span></h1>
            <h5>Content</h5>
        </div>
        <div data-role="collapsible" data-inset="false" data-collapsed="true">
            <h1>Title <span class="clickme">Click me</span></h1>
            <h5>Content</h5>
        </div>
        <div data-role="collapsible" data-inset="false" data-collapsed="true">
            <h1>Title <span class="clickme">Click me</span></h1>
            <h5>Content</h5>
        </div>
    </div>
</div>

JavaScript

$(document).on("pagecreate", "#page", function()

    $("[data-role=collapsible] a").on("click", function()
    
        event.preventDefault();
        event.stopPropagation();
    );

    $(".clickme").on("click", function()
    
        var element = $(this).closest("[data-role=collapsible]");
        if (element.attr("data-collapsed") == "true")
        
            element.attr("data-collapsed", "false");
            element.collapsible("expand");
        
        else
        
            element.attr("data-collapsed", "true");
            element.collapsible("collapse");
        
    );
);

JSFiddle

【讨论】：

废话，我正在做的几件事导致这不起作用。我会跟进一个额外的答案。谢谢你。

【参考方案2】：

所以我做错了一些事情，Sga 很有帮助地指出了。

您不能使用 vclick。无论出于何种原因，这个 jQM 插件都没有使用已建立的 jQM 事件来处理它的内容。我之前在听vclick事件：

$parent.on('vclick', '[data-role=collapsible] a', function() );

你不能绑定你想要阻止默认的东西在父级上。例如：

$parent.on('click', '[data-role=collapsible] a', function() );

这不行，你必须在元素被渲染后绑定它：

$('.collapse-target', $list).on('click', function() );

在做了所有这一切之后，这完全不是最佳的，我能够达到我想要的效果。可折叠小部件的开箱即用没有包含此功能，这太糟糕了。希望这可以帮助某人。