Question

我正在尝试让jQuery手风琴扩展/折叠日常事件列表。

整个事件列表位于/Project Properties/Actions/

内

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

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

到目前为止我所拥有的是：

<li class="Oct202015event">

我遇到了一些问题。

页面加载时应折叠所有列表，目前它们都已展开。
我正在使用的代码没有正确包裹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>"); }); });。

Here is the page I'm using this on

Answer 1

只需移动您的代码，以便在初始化您的手风琴的代码上方<ul>包装。

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

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

＆＃13;

$(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
  });  
  
});

＆＃13;

h3.event-date {
  cursor: pointer;
}

＆＃13;

<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>

＆＃13;

Answer 2

为了让所有内容都关闭，您需要在可折叠设置为true的位置下方active: false。

不确定你的意思是代码不是围绕着LI

jQuery Accordion扩展每日活动列表

2 个答案: