jquery - 嵌套 Accordion JQuery

Question

我有一个简单的 Accordion 菜单，仅从 jsfiddle 获得。 我想让它嵌套。

点击jsfiddle

发布代码以防 jsfiddle 不起作用:

HTML

<div class="accordion-expand-holder">
<button type="button" class="open">Expand all</button>
<button type="button" class="close">Collapse all</button>
</div>

<div id="accordion">
<h3>Section 1</h3>
<div>
    <p>Para 1</p>
</div>

<h3>Section 2</h3>
<div>
    <p>Para 2</p>
</div>

<h3>Section 3</h3>
<div>
    <p>Para 3</p>
    <ul>
        <li>List item one</li>
        <li>List item two</li>
        <li>List item three</li>
    </ul>
</div>

<h3>Section 4</h3>
<div>
    <p>para 4 - 1</p>
    <p>Para 4 - 2</p>
</div>

JQuery:

$(function () {
$("#accordion").accordion({
    collapsible:true,
    active:false
});
var icons = $( "#accordion" ).accordion( "option", "icons" );
$('.open').click(function () {
    $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
        'aria-selected': 'true',
        'tabindex': '0'
    });
    $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
    $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
        'aria-expanded': 'true',
        'aria-hidden': 'false'
    }).show();
    $(this).attr("disabled","disabled");
    $('.close').removeAttr("disabled");
});
$('.close').click(function () {
    $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
        'aria-selected': 'false',
        'tabindex': '-1'
    });
    $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
    $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
        'aria-expanded': 'false',
        'aria-hidden': 'true'
    }).hide();
    $(this).attr("disabled","disabled");
    $('.open').removeAttr("disabled");
});
$('.ui-accordion-header').click(function () {
    $('.open').removeAttr("disabled");
    $('.close').removeAttr("disabled");

});
});

CSS:

body {
font-family:Arial, Tahoma, Verdana, Helvetica, sans-serif;
font-size:65%;
}
.accordion-expand-holder {
margin:10px 0;
}
.accordion-expand-holder .open, .accordion-expand-holder .close {
margin:0 10px 0 0;
}

我希望这些菜单是嵌套的。 我是 JQuery 新手，请温柔一点。

Answer 1

看看这个 fiddle :http://jsfiddle.net/hEApL/148/

<div class="accordion-expand-holder">
    <button type="button" class="open">Expand all</button>
    <button type="button" class="close">Collapse all</button>
</div>

<div id="accordion">
     <h3>Section 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>

    <!-- inner accordian -->    
<div id="accordion1" >
     <h3>Section 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>


</div>
           <!-- inner accordian --> 

    </div>


</div>

你的js:

// Accordion - Expand All #01 
$(function () {
    $("#accordion").accordion({
        collapsible:true,
        active:false
    });
        $("#accordion1").accordion({
        collapsible:true,
        active:false
    });



    var icons = $( "#accordion" ).accordion( "option", "icons" );
    $('.open').click(function () {
        $('.ui-accordion-header').removeClass('ui-corner-all').addClass('ui-accordion-header-active ui-state-active ui-corner-top').attr({
            'aria-selected': 'true',
            'tabindex': '0'
        });
        $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected);
        $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({
            'aria-expanded': 'true',
            'aria-hidden': 'false'
        }).show();
        $(this).attr("disabled","disabled");
        $('.close').removeAttr("disabled");
    });
    $('.close').click(function () {
        $('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
            'aria-selected': 'false',
            'tabindex': '-1'
        });
        $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
        $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
            'aria-expanded': 'false',
            'aria-hidden': 'true'
        }).hide();
        $(this).attr("disabled","disabled");
        $('.open').removeAttr("disabled");
    });
    $('.ui-accordion-header').click(function () {
        $('.open').removeAttr("disabled");
        $('.close').removeAttr("disabled");

    });
});