多級列表菜單

Question

我力爭達到以下結構

的（不同的！）的類別列表

• 1類
• 類別2
• 種類n

並且每個類別鏈接到類別內的帖子。而帖子鏈接到內容

• 後1貓1 - >內容後1貓1
• 後2貓2 - >內容後2貓1

問題：我不知道如何創建導致帖子的不同類別的清單。任何解決方案

這是我的JSON例子（這是在WordPress的JSON API插件）

{"status": "ok", 
"count": 10, 
"count_total": 20, 
"pages": 2, 
"posts": [ 
    { 
     "id": 86, 
     "type": "post", 
     "slug": "inaktiviert", 
     "url": "http://localhost/wordpress/?p=86", 
     "status": "publish", 
     "title": "Post 1 Cat1", 
     "content": "his is content for Post1 Cat 1.", 
     "date": "2014-03-04 15:09:51", 
     "modified": "2014-03-04 15:09:51", 
     "categories": [ 
      { 
       "id": 1, 
       "title": "Category 1", 
       "description": "", 
       "parent": 0, 
       "post_count": 4 
      } 
     ], 
    }, 
    { 
     "id": 84, 
     "type": "post", 
     "slug": "kann-nicht-aktualisiert-werden", 
     "url": "http://localhost/wordpress/?p=84", 
     "status": "publish", 
     "title": "Post 2 Cat1", 
     "content": "<p>This is content for Post2 Cat 1.</p>\n", 
     "date": "2014-03-04 15:09:25", 
     "modified": "2014-03-04 15:09:25", 
     "categories": [ 
      { 
       "id": 1, 
       "title": "Category 1", 
       "description": "", 
       "parent": 0, 
       "post_count": 4 
      } 
     ], 
    }, 
     { 
      "id": 74, 
      "type": "post", 
      "slug": "dieses-symbol-zeigt-an", 
      "url": "http://localhost/wordpress/?p=74", 
      "status": "publish", 
      "title": "Post 1 Cat2", 
      "content": "This is Content for Post1 Cat 2", 
      "date": "2014-03-04 15:06:47", 
      "modified": "2014-03-04 15:06:47", 
      "categories": [ 
       { 
        "id": 2, 
        "title": "Category 2", 
        "description": "", 
        "parent": 0, 
        "post_count": 3 
       } 
      ], 
     } 
    ]} 

而且這是我的JS

$(document).on("pagecreate", "#page1", function(){ 
    var liste = $('#liste'); 

    var AllListItems = ''; 
    var AllDynamicPages = ''; 
    $.each(daten.posts, function(index1, data) { 
     var postid = data.id; 
     var postTitle = data.title; 
     var postContent = data.content; 

     for (var i = 0; i< data.categories.length; i++) { 

      var catid = data.categories[i].id;  
      var catTitle = data.categories[i].title;    
      AllListItems += '<li><a href="#page' + postid + '">' + postTitle + '</a></li>';  
      AllDynamicPages += '<div data-role="page" data-add-back-btn="true" id="page' + postid + '"><div data-role="header"><h1>' + postTitle + '</h1></div><div data-role="content">' + postContent + '</div></div>' 
     }   
    }); 

    liste.empty().append(AllListItems).listview("refresh"); 
    $("body").append(AllDynamicPages); 
}); 

DEMO

Answer 1

我會這樣來解決：而不是一個列表，創建一個可摺疊的集合，其中每個可摺疊的子集是一個類別，每個可摺疊的類別包含一個帖子列表。

這裏是你的更新FIDDLE

所以頂級的HTML標記將是一個可摺疊的一套：

<div id="thelist" data-role="collapsibleset" data-theme="a" data-content-theme="a">  
</div> 

然後代碼：

var liste = $('#thelist'); 
var AllDynamicPages = ''; 
$.each(daten.posts, function(index1, data) { 
    var postid = data.id; 
    var postTitle = data.title; 
    var postContent = data.content;   
    for (var i = 0; i< data.categories.length; i++) { 
     var catid = data.categories[i].id;  
     var catTitle = data.categories[i].title;    
     //see if we already have this category, if not create new collapsible 
     var $cat = $("#cat" + catid); 
     if ($cat.length == 0){ 
      $cat = $('<div id="cat' + catid + '" data-role="collapsible"><h3>' + catTitle + '</h3><ul data-role="listview"></ul></div>'); 
      liste.append($cat); 
     } 

     //create post link in category collapsible list 
     var postlink = '<li><a href="#page' + postid + '">' + postTitle + '</a></li>'; 
     $cat.find("ul").append(postlink); 

     AllDynamicPages += '<div data-role="page" data-add-back-btn="true" id="page' + postid + '"><div data-role="header"><h1>' + postTitle + '</h1></div><div data-role="content">' + postContent + '</div></div>' 
    }   
});   
liste.enhanceWithin(); 
$("body").append(AllDynamicPages); 

它是相同的迭代像以前一樣，但現在對於每個類別，我們檢查是否已經有可摺疊的類別。如果沒有，我們創建一個並將其添加到集合中。然後，我們爲帖子創建一個鏈接，並將其添加到類別collapsible中的列表小部件。

最後我們調用.enhanceWithin()來應用jQM樣式。

動態頁面部分保持完全相同。