JQueryUI 手风琴范围

Question

我正在尝试为我的网页设置 JQueryUI Accordion。我大部分时间都在工作，但它似乎排除了一些我打算在其中一个标题下包含的文本。

文本“Office for Macs”及其下方的链接应位于“远程访问支持”标题下，但它似乎显示在 Accordion 之外。

我已尝试多次更改标题选项，但均无济于事。这是我现在拥有的：

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'
});
});

我在这里创建了一个包含所有相关代码的 Fiddle：http://jsfiddle.net/ukq45wts/

关于如何告诉 JQueryUI 在最后一个标题下包含“Office for Macs”文本有什么想法吗？

提前谢谢你！

Answer 1

删除“Office For Macs”上方的<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 2

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

应该是<li class="section-empty">

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

更新

在 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