我真的不懂 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
最佳答案
这是基于您的结构的 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();
}
});
关于javascript - 使用 jQuery 创建所提供内容的 Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36049846/