Question

我真的不懂JS / jQuery。我需要使用这个HTML并使用JS来转换/重新构造它，以便它可以作为手风琴使用。

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作为手风琴链接和内容区域之间的内容。我设法从一个教程中得到这个，但它作为标签，并不知道如何重做，所以它作为手风琴的行为/结构：

我想需要的是（当点击标题更改为正确的内容时）：

<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

这是一个基于您的结构的非常简单的手风琴实现。 Codepen for it：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代替段落项上的类。

更新 - 额外的手风琴功能

这是一个更新，只强制一次打开一个手风琴：更新了Codepen：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();
  }
});

使用jQuery创建提供内容的手风琴

1 个答案: