0

我正在尝试让 jQuery 手风琴展开/折叠日常活动列表。

整个事件列表在里面<div id="accordion"><!-- events here --></div>

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

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

我到目前为止是这样的：

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

我对此有一些问题。

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

这是我正在使用的页面。

4

2 回答 2

1

只需将用于包装的代码移到<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: $9 ages 2 and up
    <br />Available Activities: Inflatable bouncers, Kids Zone, Petting Zoo , Train rides ($2.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: $9 ages 2 and up
    <br />Available Activities: Inflatable bouncers, Kids Zone, Petting Zoo , Train rides ($2.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: $10 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: $9 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: $17 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: $9 ages 2 and up
    <br />Available Activities: Inflatable bouncers, Kids Zone, Petting Zoo , Train rides ($2.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: $10 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: $9 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: $17 per person
  </li>
</div>

于 2015-10-21T14:19:07.943 回答
0

为了让所有东西都关闭，您希望active: false在您将 collapsible 设置为 true 的位置下方。

不知道你的意思是代码没有环绕LI

于 2015-10-20T20:45:46.403 回答