javascript - 使用 jQuery 创建所提供内容的 Accordion

Question

我真的不懂 JS/jQuery。我需要获取此 HTML 并使用 JS 对其进行转换/重新构造，使其具有 Accordion 的功能。

HTML:

<h6>heading 1</h6>
<p>this is some content</p>
<p>this is some more content</p>

<h6>heading 2</h6>
<p>this is some content</p>
<p>this is some more content</p>

<h6>heading 3</h6>
<p>this is some content</p>
<p>this is some more content</p>

我需要将 h6 作为内容区域之间的 Accordion 链接和内容。我设法从一个教程中将其组合在一起，但它以选项卡的形式进行，并且不确定如何重做，因此它的行为/结构就像 Accordion 一样:

我想需要是这样的(当然当点击标题更改为正确的内容时):

<div class="accordion">
  <div class="title">title 1</div>
  <div class="content">content 1</div>

  <div class="title">title 2</div>
  <div class="content">content 2</div>
</div>

我需要调整的JS:

var headers = $("#tab_description h6");

  $('#tab_description h6').each(function(i){      
    $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-'+i+'"/>');
  });

  for( var i = 0; i < headers.length; i++ ) {
    $('.tabs').append('<li class=""><a href="#tab-'+i+'">'+headers[i].innerHTML+'</a></li>');
  }

  $('ul.tabs').each(function(){
    var active, content, links = $(this).find('a');
    var listitem = $(this).find('li');
    active = listitem.first().addClass('active');
    content = $(active.attr('href'));
      $('.tab').hide();
    $(this).find('a').click(function(e){
      $('.tab').hide();
      $('ul.tabs li').removeClass('active');
      content.hide();
      active = $(this);
      content = $($(this).attr('href'));
      active.parent().addClass('active');
      content.show();
      return false;
    });
  });

  headers.remove(); // remove headers from description  
  $('#tab-0').show(); // show the first tab

Answer 1

这是基于您的结构的 Accordion 的一个非常简单的实现。代码笔:http://codepen.io/anon/pen/EKZgMy

此实现使用 jQuery nextUntil 函数来实现所需的结果。

HTML

<div class="accordion">

  <h6>heading 1</h6>
  <p>this is some content</p>
  <p>this is some more content</p>

  <h6>heading 2</h6>
  <p>this is some content</p>
  <p>this is some more content</p>

  <h6>heading 3</h6>
  <p>this is some content</p>
  <p>this is some more content</p>

</div>

CSS

.accordion h6 {
  display: block;
  cursor: pointer;
}

.accordion p {
  display: none;
  margin: 0;
  padding: 0 0 1em;
}

.accordion * {
  display: none
}

jQuery

$('.accordion h6').click(function() {
  $(this).nextUntil('h6').toggle();
});

如果您想要动画，您可以使用 jQuery 来切换段落项目上的类。

更新 - 额外的 Accordion 功能

这是一个强制一次只打开一个 Accordion 的更新:更新代码笔:http://codepen.io/anon/pen/pyREYM

jQuery

var accordionContent = $('.accordion p');

$('.accordion h6').click(function() {

  // Check if current accordion item is open
  var isOpen = $(this).next().is(":visible");

  // Hide all accordion items
  accordionContent.hide();

  // Open accordion item if previously closed
  if (!isOpen) {
    $(this).nextUntil('h6').show();
  }
});