-3


おそらくあなたは私を助けることができます。次のように、javascript コンテンツを使用してjquerymobile の折りたたみ( http://jquerymobile.com/test/docs/content/content-collapsible.html )を自動作成したい:

<h3>title 1</h3>
some text

<h3>title 2</h3>
some text

<h3>title 3</h3>
some text

このコンテンツは、以前は操作できなかった JSON から取得されます。
私はそれぞれをラップする必要があります:

<h3>title</h3>
some text

これとともに ：

<div data-role="collapsible" data-collapsed="true"></div>

しかし、うまくいきません... 助けて!

4

3 に答える 3

2

HTML

<h3 class="collapse" data-target="content1">Head 1</h3>
<div class="hidden" id="content1"></div>

<h3 class="collapse">Head 2</h3>
<div class="hidden" id="content2"></div>

<h3 class="collapse">Head 3</h3>
<div class="hidden" id="content3"></div>

JavaScript

$(".collapse").each(function(){
    var el = $(this);
    el.click(function(){
        var id = el.attr("data-target");
        // files same names with id's
        $("#"+ id).load("ajax/"+ id +".html");
        // or
        $("#"+ id).load("ajax.php", function(responseText){
            $("#"+ id).html(responseText);
        });
    });
});
于 2013-02-01T15:30:20.237 に答える
1

このページのソース コードを見ると、jQuery がクリック イベントに基づいて動的にクラスを追加および削除していることがわかります。コンテンツを div にラップし、jQuery を使用してクラスを動的に追加および削除します。何かのようなもの

<h3 id="collpase-bar" class="collapsed">Collapse Title</h3>
<div class="collapsible-content hidden">Content</div>

jQuery関数を使用して、折りたたみタイトルのクリックイベントを処理し、これに変更します

<h3 id="collapse-bar" class="not-collapsed">Collapse Title</h3>
<div class="collapsible-content shown">Content</div>

それは簡単な説明です、私はそれを例証するフィドルを作るつもりです;）

于 2013-02-01T14:58:51.463 に答える
-1

http://jqueryui.com/accordion/#defaultが役に立ちます。一方、折りたたみ可能なセクションを作成したいということは理解しています。

于 2013-02-01T14:52:50.660 に答える