jQuery 手风琴展开每日活动列表

Question

我正在尝试将 jQuery 手风琴添加到 expand/collapse 日常活动列表。

整个事件列表都在里面 <div id="accordion"></div>

例如，

每天都有一个 <h3> header 包含在手风琴 div 中，日期为 <h3>Tuesday, October 20, 2015</h3>。每个 individual 事件都在日期 header 下方的列表中。该列表使用类按天对事件进行分组，因此 10 月 20 日的事件都将具有 <li class="Oct202015event">.

我认为，为了让手风琴正常工作，我需要将每天的事件列表包装在 a 中，然后它将获得适当的 expand/collapse 类.

我目前的情况是这样的：

jQuery(document).ready(function($) {
  $( "#accordion" ).accordion({
    collapsible: true
  });
  // Collect all li classes ending in "event"
  var $list = $("li[class$='event']");

  // Collect all unique class names
  var classNames = $list.map(function() {
      return this.className;
  });
  classNames = $.unique(classNames.get());
// wrap all of the same class names with a <ul>
  $.each(classNames, function(i, className) {
        $list.filter(function() {
            return $(this).hasClass(className);
        }).wrapAll("<ul>");
  });
});

我遇到了一些问题。

页面加载时所有列表都应该折叠，目前它们都是展开的。
我使用的代码没有正确环绕 <li>。

Here is the page I'm using this on.

Answer 1

为了关闭所有内容，您需要 active: false 在将 collapsible 设置为 true 的下方。

不确定您的意思是代码没有环绕 LI

Answer 2

只需将 <ul> 中用于包装的代码移到初始化手风琴的代码上方。

如果先初始化手风琴，那么它只会使用每个列表中的第一个<li>作为对应<h3>.

的内容

此外，collapsible: true 将允许折叠所有标题，但您还需要 active: false 才能在初始化时将它们全部折叠，如@DaOgre 所述。

$(document).ready(function() {
  // Collect all li classes ending in "event"
  var $list = $("li[class$='event']");

  // Collect all unique class names
  var classNames = $list.map(function() {
      return this.className;
  });
  classNames = $.unique(classNames.get());
// wrap all of the same class names with a <ul>
  $.each(classNames, function(i, className) {
        $list.filter(function() {
            return $(this).hasClass(className);
        }).wrapAll("<ul>");
  });
  
  $('#accordion').accordion({
    collapsible: true,
    active: false
  });  
  
});

h3.event-date {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<div id="accordion">

  <h3 class="event-date">Tuesday, October 20, 2015</h3>
  <li class="Oct202015event"><a href='http://www.tolmachoff-farms.com/corn_maze_pumpkin_patch_glendale_arizona.html'><strong>Tomalchoff Farm Corn Maze and Pumpkin Patch</strong></a>: 5726 N 75th Ave Glendale, AZ
    <br />Time: 11am-8pm
    <br />Cost:  ages 2 and up
    <br />Available Activities: Inflatable bouncers, Kids Zone, Petting Zoo , Train rides (.00 extra) on weekends only
  </li>
  <li class="Oct202015event"><a href='http://www.tolmachoff-farms.com/corn_maze_pumpkin_patch_glendale_arizona.html'><strong>Tomalchoff Farm Corn Maze and Pumpkin Patch</strong></a>: 5726 N 75th Ave Glendale, AZ
    <br />Time: 11am-8pm
    <br />Cost:  ages 2 and up
    <br />Available Activities: Inflatable bouncers, Kids Zone, Petting Zoo , Train rides (.00 extra) on weekends only
  </li>
  <li class="Oct202015event"><a href='http://www.mothernaturesfarm.com/pumpkinpatch.aspx'><strong>Halloween Pumpkin Patch at Mother Nature&#8217;s Farm</strong></a>: 1663 E Baseline Rd Gilbert, AZ
    <br />Time: 9am-9pm
    <br />Cost:  per child
    <br />Available Activities: Food Vendors, Petting Zoo , admission includes a pumpkin
  </li>
  <li class="Oct202015event"><a href='http://vertucciofarms.com/events/'><strong>Vertuccio Farms Corn Maze and Fall Festival</strong></a>: 4011 S Power Rd Mesa, AZ
    <br />Time: 9am-9pm
    <br />Cost:  per person
  </li>
  <li class="Oct202015event"><a href='http://www.schnepffarms.com/event/pumpkin-chili-party/'><strong>Schnepf Farms Pumpkin and Chili Party</strong></a>: 24810 S Rittenhouse Road Queen Creek, AZ
    <br />Time: 8am-4pm
    <br />Cost:  per person
  </li>

  <h3 class="event-date">Wednesday, October 21, 2015</h3>
  <li class="Oct212015event"><a href='http://www.azstatefair.com'><strong>Arizona State Fair</strong></a>: See oct 16th Phoenix, AZ
    <br />Time: Noon-9pm
    <br />Cost: see oct 16th
  </li>
  <li class="Oct212015event"><a href='http://www.tolmachoff-farms.com/corn_maze_pumpkin_patch_glendale_arizona.html'><strong>Tomalchoff Farm Corn Maze and Pumpkin Patch</strong></a>: 5726 N 75th Ave Glendale, AZ
    <br />Time: 11am-8pm
    <br />Cost:  ages 2 and up
    <br />Available Activities: Inflatable bouncers, Kids Zone, Petting Zoo , Train rides (.00 extra) on weekends only
  </li>
  <li class="Oct212015event"><a href='http://www.mothernaturesfarm.com/pumpkinpatch.aspx'><strong>Halloween Pumpkin Patch at Mother Nature&#8217;s Farm</strong></a>: 1663 E Baseline Rd Gilbert, AZ
    <br />Time: 9am-9pm
    <br />Cost:  per child
    <br />Available Activities: Food Vendors, Petting Zoo , admission includes a pumpkin
  </li>
  <li class="Oct212015event"><a href='http://vertucciofarms.com/events/'><strong>Vertuccio Farms Corn Maze and Fall Festival</strong></a>: 4011 S Power Rd Mesa, AZ
    <br />Time: 9am-9pm
    <br />Cost:  per person
  </li>
  <li class="Oct212015event"><a href='http://www.schnepffarms.com/event/pumpkin-chili-party/'><strong>Schnepf Farms Pumpkin and Chili Party</strong></a>: 24810 S Rittenhouse Road Queen Creek, AZ
    <br />Time: 8am-4pm
    <br />Cost:  per person
  </li>
</div>

jQuery 手风琴展开每日活动列表

jQuery Accordion Expand List of Daily Events

jquery

wrapall