JQueryUI Accordion Scope

Question

Я пытаюсь настроить Аккордеон JQueryUI для своей веб-страницы. У меня он работает по большей части, но, похоже, он исключает какой-то текст, который я хотел включить в один из заголовков.

Текст «Офис для компьютеров 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> 

     <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 для Mac» под последним заголовком?

Спасибо заранее!

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

Вам необходимо продлить под Remote Поддержка доступа, чтобы включить Office для Mac, отладить его.

HTML Markup

<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