在Django模板中使用Jquery的多級可摺疊內容

Question

我有一個我想在Django模板中提供的多級（未知深度）內容。我有變量{{source}}，它基本上是一個元素列表。每個元素可以是簡單的（{name：xxx，value：yyy}）或者一個新的容器（{name：zzz：members：[另一個元素列表}）

我想弄明白如何寫我的jQuery和我的模板來實現可摺疊的內容，將顯示用戶
<div class='header'>{{xxx.name}}</div> <div class='content'>{{xxx.value}}</div>

我想，我需要使用模板遞歸（like this)所以我可以循環一遍又一遍，直到我達到我的變量內容的底部。

關於如何做到這一點的任何建議？

W我可以使用像允許展開/折回的東西：
$(".header").click(function(){ $content = $(this).next('content'); $content.toggle(); });
因此，我可以允許用戶顯示類「內容」的隱藏div，因爲此類最初設置爲顯示：無與CSS，無處不在這一頁。但我無法弄清楚如何建立這種嵌套結構，當點擊用戶展開該層次內部的內容時，只顯示成員值或新的子成員名稱（如果內容是另一個列表的話）和新的子成員會員成爲可點擊的新標題（容器），以允許用戶展開其他內容。

乾杯， 米洛斯

Answer 1

通過查看布蘭登·帕爾默的代碼示例中找到了答案，我的問題

HTML

<h1>A Cool Accordion</h1> 

<p class="description"> 
    You could simply toggle the .show class (if display: block is uncommented in the CSS) in JavaScript, but you'll lose the animation. 
</p> 

<ul class="accordion"> 
    <li> 
    <a class="toggle" href="javascript:void(0);">Item 1</a> 
    <ul class="inner"> 
     <li>Option 1</li> 
     <li>Option 2</li> 
     <li>Option 3</li> 
    </ul> 
    </li> 

    <li> 
    <a class="toggle" href="javascript:void(0);">Item 2</a> 
    <ul class="inner"> 
     <li>Option 1</li> 
     <li>Option 2</li> 
     <li>Option 3</li> 
    </ul> 
    </li> 

    <li> 
    <a class="toggle" href="javascript:void(0);">Item 3</a> 
    <ul class="inner"> 
     <li> 
     <a href="#" class="toggle">Open Inner</a> 
     <div class="inner"> 
      <p> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus 
      blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis. 
      </p> 
     </div> 
     </li> 

     <li> 
     <a href="#" class="toggle">Open Inner #2</a> 
     <div class="inner"> 
      <p> 
      Children will automatically close upon closing its parent. 
      </p> 
     </div> 
     </li> 

     <li>Option 3</li> 
    </ul> 
    </li> 

    <li> 
    <a class="toggle" href="javascript:void(0);">Item 4</a> 
    <ul class="inner"> 
     <li> 
     <a href="#" class="toggle">Technically any number of nested elements</a> 
     <ul class="inner"> 
      <li> 
      <a href="#" class="toggle">Another nested element</a> 
      <div class="inner"> 
       <p> 
       As long as the inner element has inner as one of its classes then it will be toggled. 
       </p> 
       <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus 
       blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis. 
       </p> 
      </div> 
      </li> 
     </ul> 
     </li> 

     <li>Option 2</li> 

     <li>Option 3</li> 
    </ul> 
    </li> 
</ul> 

CSS：

@import url('http://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600'); 

* { 
    box-sizing: border-box; 
    font-family: 'Open Sans',sans-serif; 
    font-weight: 300; 
} 

a { 
    text-decoration: none; 
    color: inherit; 
} 

p { 
    font-size:1.1em; 
    margin: 1em 0; 
} 

.description { 
    margin: 1em auto 2.25em; 
} 

body { 
    width: 40%; 
    min-width: 300px; 
    max-width: 400px; 
    margin: 1.5em auto; 
    color: #333; 
} 

h1 { 
    font-family: 'Pacifico', cursive; 
    font-weight: 400; 
    font-size: 2.5em; 
} 

ul { 
    list-style: none; 
    padding: 0; 

    .inner { 
     padding-left: 1em; 
     overflow: hidden; 
     display: none; 

     &.show { 
      /*display: block;*/ 
     } 
    } 

    li { 
     margin: .5em 0; 

     a.toggle { 
      width: 100%; 
      display: block; 
      background: rgba(0,0,0,0.78); 
      color: #fefefe; 
      padding: .75em; 
      border-radius: 0.15em; 
      transition: background .3s ease; 

      &:hover { 
       background: rgba(0, 0, 0, 0.9); 
      } 
     } 
    } 
} 

JS：

$('.toggle').click(function(e) { 
    e.preventDefault(); 

    var $this = $(this); 

    if ($this.next().hasClass('show')) { 
     $this.next().removeClass('show'); 
     $this.next().slideUp(350); 
    } else { 
     $this.parent().parent().find('li .inner').removeClass('show'); 
     $this.parent().parent().find('li .inner').slideUp(350); 
     $this.next().toggleClass('show'); 
     $this.next().slideToggle(350); 
    } 
}); 

https://codepen.io/brenden/pen/Kwbpyj