jQuery 手风琴 - 跳过列表元素

Question

我在 UL 上使用 jQuery 的手风琴，其中大部分 LI 项目都将成为手风琴，每个都在其下方显示一个链接列表。工作正常。但是当然，客户希望列表中的几个节点只是列表中的单个链接。他们没有类别并且在顶层。

有没有一种方法可以使用 jQuery 手风琴来告诉它跳过一个节点？我目前将 accordion() 方法瞄准 UL 节点，它将每个 LI 变成手风琴。当我分别针对每个 li 时，事情会变得很奇怪。

所以我想要的是：

<ul class="accordion">
  <li class="leavemealone"><A>mylink</a></li>
  <li><h3>title</h3><div>list of stuff to be inside the accordion</div></li>
</ul>

或一些等价物。我没有在文档中看到它。有这种东西吗？

Answer 1

The markup of your accordion container needs pairs of headers and content panels:

<div id="accordion">
  <h3>First header</h3>
  <div>First content panel</div>
  <h3>Second header</h3>
  <div>Second content panel</div>
</div>

Accordions support arbitrary markup, but each content panel must always be the next sibling after its associated header. See the header option for information on how to use custom markup structures.

如果我们再查看 header，我们会看到：

Selector for the header element, applied via .find() on the main accordion element. Content panels must be the sibling immediately after their associated headers.

所以如果我们定义一个header，内容必须是兄弟。如果每个 li 都是 header 和内容对，这会很好用。

考虑以下示例。

$(function() {
  $("#accordion").accordion({
    header: "li.header",
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<ul id="accordion">
  <li class="leavemealone"><a href="#">mylink</a></li>
  <li class="header">Section 1</li>
  <li>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum
      a velit eu ante scelerisque vulputate.</p>
  </li>
  <li class="header">Section 2</li>
  <li>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.</p>
  </li>
  <li class="header">Section 3</li>
  <li>
    <p>
      Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam
      nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </li>
  <li class="header">Section 4</li>
  <li>
    <p>
      Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
    </p>
    <p>
      Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    </p>
  </li>
</ul>

如您所见，每个 li 成为一个容器，它要么是 header，要么就是内容。所以你不需要使用 h3 或 div 作为包装器。

Answer 2

你必须在 li 标签下放置另一个手风琴作为嵌套手风琴

<ul class="accordion"> 
   <li class="leavemealone"><A>mylink</a></li>
   <li><h3>title</h3> 
   <ul class="accordion2">
   <li class="leavemealone2"><A>mylink</a></li>
   <li><h3>title</h3></li>
  </ul>
  </li>
</ul>

jQuery 手风琴 - 跳过列表元素

jQuery accordion - skip a list element

javascript

jquery

jquery-ui