Аккордеон JQuery расширяет список ежедневных событий

Я пытаюсь заставить аккордеон jQuery развернуть / свернуть список ежедневных событий.

Весь список событий находится внутри <div id="accordion"><!-- events here --></div>

Каждый день имеет <h3> заголовок включен в div аккордеона с датой <h3>Tuesday, October 20, 2015</h3>, например. Каждое отдельное событие находится в списке под заголовком даты. В списке используются классы для группировки событий по дням, поэтому все события 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> правильно.

Вот страница, на которой я использую это.

Источник

2 ответа

Решение

Просто переместите свой код для переноса в <ul> Выше кода, который инициализирует ваш аккордеон.

Если вы сначала инициализируете аккордеон, то он просто использует первый <li> в каждом списке в качестве контента для соответствующего <h3>,

Кроме того, collapsible: true позволит свернуть все заголовки, но вам также нужно active: false чтобы все они рухнули при init, как упоминалось @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>

Источник

Для того, чтобы все было закрыто, вы хотите active: false внизу, где вы устанавливаете разборный в истину.

Не уверен, что вы имеете в виду, что код не оборачивается вокруг LI

Источник
Другие вопросы по тегам