JQueryUI Accordion Scope

Question

我正在嘗試爲我的網頁設置JQueryUI Accordion。我大部分都在工作，但它似乎排除了我打算在其中一個標題下包含的某些文本。

文字「Mac for Office」及其下面的鏈接應位於「遠程訪問支持」標題下，但似乎在手風琴之外顯示。

我試過幾次改變標題選項無濟於事。這是我現在有：

HTML：

<div class="category-tree"> 
    <section class="category"> 
     <h2> 
      <a href="/hc/en-us/categories/200204910-Application-Support">Application Support</a> 
     </h2> 
     <i class="category-empty"> 
      <a href="/hc/en-us/categories/200204910-Application-Support">empty</a> 
     </i> 
    </section> 

    <section class="category"> 
     <h2> 
      <a href="/hc/en-us/categories/200204790-Mac-Support">Mac Support</a> 
     </h2> 
     <i class="category-empty"> 
      <a href="/hc/en-us/categories/200204790-Mac-Support">empty</a> 
     </i> 
    </section> 

    <section class="category"> 
     <h2> 
      <a href="/hc/en-us/categories/200208874-Windows-Support">Windows Support</a> 
     </h2> 
     <i class="category-empty"> 
      <a href="/hc/en-us/categories/200208874-Windows-Support">empty</a> 
     </i> 
    </section> 

    <section class="category"> 
     <h2> 
      <a href="/hc/en-us/categories/200208864-Mobile-Device-Support">Mobile Device Support</a> 
     </h2> 
     <i class="category-empty"> 
      <a href="/hc/en-us/categories/200208864-Mobile-Device-Support">empty</a> 
     </i> 
    </section> 

    <section class="category"> 
     <h2> 
      <a href="/hc/en-us/categories/200208854-Remote-Access-Support">Remote Access Support</a> 
     </h2> 

     <section class="section"> 
      <h3> 
       <a href="/hc/en-us/sections/200592804-Office-for-Windows">Office for Windows</a> 
      </h3> 
      <ul class="article-list"> 
       <li > 
        <a href="/hc/en-us/articles/202884164-How-to-delegate-access-to-your-mailbox">How to delegate access to your mailbox</a> 
       </li> 
      </ul> 
     </section> 

     <section class="section"> 
      <h3> 
       <a href="/hc/en-us/sections/200592794-Office-for-Macs">Office for Macs</a> 
      </h3> 
      <i class="section-empty"> 
       <a href="/hc/en-us/sections/200592794-Office-for-Macs">empty</a> 
      </i> 
     </section> 
    </section> 
</div> 

這裏是JavaScript：

$(function() { 
$(".category-tree").accordion({ 
collapsible: true, 
active: false, 
header: 'h2' 
}); 
}); 

我創建了一個小提琴，這裏包括所有相關代碼：http://jsfiddle.net/ukq45wts/

有什麼想法關於如何告訴JQueryUI在最後一個頭文件中包含「Office for Macs」文本？

預先感謝您！

Answer 1

什麼是<i class="section-empty">？

應該<li class="section-empty">

Answer 2

刪除<section class="section">上面的「局對於蘋果」和含有像這樣中移動：

<section class="section"> 
    <h3> 
     <a href="/hc/en-us/sections/200592804-Office-for-Windows">Office for Windows</a> 
    </h3> 
<ul class="article-list"> 
    <li > 
     <a href="/hc/en-us/articles/202884164-How-to-delegate-access-to-your-mailbox">How to delegate access to your mailbox</a> 
    </li> 
    <h3> 
     <a href="/hc/en-us/sections/200592794-Office-for-Macs">Office for Macs</a> 
    </h3> 
    <li class="section-empty"><a href="/hc/en-us/sections/200592794-Office-for-Macs">empty</a></li> 
</ul> 
</section> 

</div> 

小提琴：http://jsfiddle.net/ukq45wts/3/

Answer 3

您需要延長在遠程訪問支持，以包括Office for Mac破解它。

HTML標記

<div class="category-tree"><section class="category"> 
    <h2><a href="/hc/en-us/categories/200204910-Application-Support">Application Support</a></h2> 
    <i class="category-empty"><a href="/hc/en-us/categories/200204910-Application-Support">empty</a></i> 
</section> 

<section class="category"> 
    <h2><a href="/hc/en-us/categories/200204790-Mac-Support">Mac Support</a></h2> 
    <i class="category-empty"><a href="/hc/en-us/categories/200204790-Mac-Support">empty</a></i> 
</section> 

<section class="category"> 
    <h2><a href="/hc/en-us/categories/200208874-Windows-Support">Windows Support</a></h2> 
    <i class="category-empty"><a href="/hc/en-us/categories/200208874-Windows-Support">empty</a></i> 
</section> 

<section class="category"> 
    <h2><a href="/hc/en-us/categories/200208864-Mobile-Device-Support">Mobile Device Support</a></h2> 
    <i class="category-empty"><a href="/hc/en-us/categories/200208864-Mobile-Device-Support">empty</a></i> 
</section> 

<section class="category"> 
    <h2><a href="/hc/en-us/categories/200208854-Remote-Access-Support">Remote Access Support</a></h2> 
    <section class="section"> 
    <h3> 
<a href="/hc/en-us/sections/200592804-Office-for-Windows">Office for Windows</a> 
</h3> 

    <ul class="article-list"> 
    <li > 

    <a href="/hc/en-us/articles/202884164-How-to-delegate-access-to-your-mailbox">How to delegate access to your mailbox</a> 
</li> 

    </ul> 

<section class="category"> 
    <h3> 
<a href="/hc/en-us/sections/200592794-Office-for-Macs">Office for Macs</a> 
</h3> 

    <i class="section-empty"><a href="/hc/en-us/sections/200592794-Office-for-Macs">empty</a></i> 
</section> 



</section> 

</section> 
</div> 

Working Fiddle

UPDATE

在jQuery中你指定的手風琴頭將是一個H2標籤。然後手風琴控制器會直接檢查標籤下方的標籤內容，作爲兄弟。因此，如果您需要添加多個部分（如果是遠程訪問支持），則需要將其包含在另一個部分（我將其命名爲多個部分），然後定義它。

所以HTML代碼如下：

<div class="category-tree"> 
    <section class="category"> 
     <h2><a href="/hc/en-us/categories/200204910-Application-Support">Application Support</a></h2> 
<i class="category-empty"><a href="/hc/en-us/categories/200204910-Application-Support">empty</a></i> 

    </section> 
    <section class="category"> 
     <h2><a href="/hc/en-us/categories/200204790-Mac-Support">Mac Support</a></h2> 
<i class="category-empty"><a href="/hc/en-us/categories/200204790-Mac-Support">empty</a></i> 

    </section> 
    <section class="category"> 
     <h2><a href="/hc/en-us/categories/200208874-Windows-Support">Windows Support</a></h2> 
<i class="category-empty"><a href="/hc/en-us/categories/200208874-Windows-Support">empty</a></i> 

    </section> 
    <section class="category"> 
     <h2><a href="/hc/en-us/categories/200208864-Mobile-Device-Support">Mobile Device Support</a></h2> 
<i class="category-empty"><a href="/hc/en-us/categories/200208864-Mobile-Device-Support">empty</a></i> 

    </section> 
    <section class="category"> 
     <h2><a href="/hc/en-us/categories/200208854-Remote-Access-Support">Remote Access Support</a></h2> 

     <section class="multipleSections"> 
      <section class="section"> 
       <h3> 
<a href="/hc/en-us/sections/200592804-Office-for-Windows">Office for Windows</a> 
</h3> 

       <ul class="article-list"> 
        <li> <a href="/hc/en-us/articles/202884164-How-to-delegate-access-to-your-mailbox">How to delegate access to your mailbox</a> 

        </li> 
       </ul> 
      </section> 
      <section class="section"> 
       <h3> 
<a href="/hc/en-us/sections/200592794-Office-for-Macs">Office for Macs</a> 
</h3> 
<i class="section-empty"><a href="/hc/en-us/sections/200592794-Office-for-Macs">empty</a></i> 

      </section> 
     </section> 
    </section> 
</div> 

Working Fiddle - Updated