jQuery 移动 - 仅激活可折叠小部件的特定部分

Question

有谁知道只使可折叠小部件的特定部分实际切换可折叠部分的方法吗？几个小时以来，我一直在努力解决这个问题，但似乎无法理解。

基本上，我不希望整个<li>触发expand/collapse，而只是右边的一小块区域。

谢谢。

Answer 1

这是我的解决方案：

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

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

Answer 2

所以 Sga 很有帮助地指出了一些我做错的地方。

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

$parent.on('vclick', '[data-role=collapsible] a', function() {});
您无法将要防止默认设置的内容绑定到父项上。例如：

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

那行不通，您必须在元素呈现 la:

之后绑定它

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

在做了所有这些之后，这完全不是最佳的，我能够达到我想要的效果。遗憾的是，可折叠小部件并未包含开箱即用的此功能。希望这对某人有帮助。

jQuery 移动 - 仅激活可折叠小部件的特定部分

jQuery Mobile - Make only certain part of collapsible widget active

jquery-mobile

jquery-mobile-listview

jquery-mobile-collapsible