Verschachtelte Akkordeon-JQuery
Posted: 16 Jan 2025, 11:07
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>
JQuery:
CSS:
Ich möchte, dass diese Menüs verschachtelt sind.
Ich bin neu bei JQuery, seien Sie bitte vorsichtig.
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 bin neu bei JQuery, seien Sie bitte vorsichtig.