Question

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

“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

删除“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 3

您需要扩展远程访问支持以便包含Office for Mac sunder。

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

JQueryUI手风琴范围

3 个答案: