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 に答える