0

我正在尝试将手风琴嵌套在手风琴中，我需要一些帮助。经过几次尝试，我最终得到了一个嵌套的手风琴，但是当点击它时，它并没有打开它，而是关闭并恢复到开头。任何帮助将不胜感激。

标记示例

<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;
    });
4

1 回答 1

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 );
于 2013-10-14T11:24:36.093 回答