Verschachtelte Akkordeon-JQueryJquery

JQuery-Programmierung
Guest
 Verschachtelte Akkordeon-JQuery

Post by Guest »

Ich habe ein einfaches Akkordeon-Menü, das ich nur von jsfiddle erhalten habe.
Ich möchte es verschachtelt machen.

Klicken Sie auf jsfiddle

Posten Sie den Code für den Fall, dass jsfiddle nicht funktioniert:


HTML< /p>

Code: Select all

Expand all
Collapse all

Section 1

Para 1

Section 2

Para 2

Section 3

Para 3
[list]
[*]List item one
[*]List item two
[*]List item three
[/list]

Section 4

para 4 - 1
Para 4 - 2


JQuery:

Code: Select all

$(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:

Code: Select all

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;
}
Ich möchte, dass diese Menüs verschachtelt sind.
Ich bin neu bei JQuery, seien Sie bitte vorsichtig.

Quick Reply

Change Text Case: 
   
  • Similar Topics
    Replies
    Views
    Last post