0

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

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

谢谢。

4

2 回答 2

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

于 2015-04-30T07:54:34.653 回答
0

所以有几件事我做错了，Sga 很有帮助地指出。

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

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

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

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

这不起作用，您必须在元素渲染后绑定它：

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

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

于 2015-04-30T13:18:52.180 回答