我想在手风琴中嵌入手风琴,我需要一些帮助。经过几次尝试后,我最终得到了一个嵌套的手风琴,但是当点击时,它不是打开它而是关闭并恢复到开头。任何帮助将不胜感激。
标记示例
<div id="accordion-container">
<h2 class="accordion-header">Section 1</h2>
<div class="accordion-content">
<div id="accordion-container">
<h2 class="accordion-header">Nested1 1</h2>
<div class="accordion-content">
<p>Nested 1 Content</p>
</div>
<h2 class="accordion-header">Nested 2</h2>
<div class="accordion-content">
<p>Nested 2 Content</p>
</div>
</div>
</div>
<h2 class="accordion-header">Section 2</h2>
<div class="accordion-content">
<p>Section 2 Content</p>
</div>
</div>
和jquery
$(document).ready(function()
{
//Add Inactive Class To All Accordion Headers
$('.accordion-header').toggleClass('inactive-header');
//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });
//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive- header');
$('.accordion-content').first().slideDown().toggleClass('open-content');
// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
});
答案 0 :(得分:0)
如果我是正确的,有一个关于多个(Vallenato Accordion)手风琴的类似问题在一个页面上...我已经改变了一些代码以及如何调用它...我希望这有帮助。
要调用此功能....
<SCRIPT>
$(window).load(function() {
$('#test').simpleAccordion();
$('#test2').simpleAccordion();
});
</SCRIPT>
..... jquery代码......
(function( $ ){
$.fn.simpleAccordion = function() {
var accordId = '#' + $(this).attr('id');
//Add Inactive Class To All Accordion Headers
$(accordId + ' .accordion-header').toggleClass('inactive-header');
//Set The Accordion Content Width
var contentwidth = $(accordId + ' .accordion-header').width();
$(accordId + ' .accordion-content').css({'width' : contentwidth });
//Open The First Accordion Section When Page Loads
$(accordId + ' .accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$(accordId + ' .accordion-content').first().slideDown().toggleClass('open-content');
// The Accordion Effect
$(accordId + ' .accordion-header').click(function () {
if($(this).is(accordId + ' .inactive-header')) {
$(accordId + ' .active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
return false;
};
})( jQuery );