Вложенный аккордеон JQuery ⇐ Jquery
-
Anonymous
Вложенный аккордеон JQuery
У меня есть простое меню «Аккордеон», которое я получил только из jsfiddle. Я хочу сделать его вложенным.
Нажмите jsfiddle
Публикация кода на случай, если jsfiddle не работает:
HTML
Развернуть все Свернуть все Раздел 1 Пункт 1
Раздел 2
Пункт 2
Раздел 3
Пункт 3
[*]Первый элемент списка [*]Перечислите второй элемент [*]Перечислите третий элемент Раздел 4
пункт 4–1
Пункты 4–2
JQuery:
$(function () { $("#аккордеон").accordion({ складной: правда, активный: ложь }); var icon = $( "#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': 'истина', 'табиндекс': '0' }); $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected); $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({ 'расширенная ария': 'истина', 'ария-скрытая': 'ложь' }).показывать(); $(this).attr("отключено","отключено"); $('.close').removeAttr("отключено"); }); $('.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', 'табиндекс': '-1' }); $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header); $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({ 'расширенная ария': 'ложь', 'ария-скрытая': 'истина' }).скрывать(); $(this).attr("отключено","отключено"); $('.open').removeAttr("отключено"); }); $('.ui-accordion-header').click(function () { $('.open').removeAttr("отключено"); $('.close').removeAttr("отключено"); }); }); CSS:
тело { семейство шрифтов: Arial, Tahoma, Verdana, Helvetica, без засечек; размер шрифта: 65%; } .accordion-expand-holder { поле: 10 пикселей 0; } .accordion-expand-holder .open, .accordion-expand-holder .close { поле:0 10px 0 0; } Я хочу, чтобы эти меню были вложенными. Я новичок в JQuery, пожалуйста, будьте осторожны.
У меня есть простое меню «Аккордеон», которое я получил только из jsfiddle. Я хочу сделать его вложенным.
Нажмите jsfiddle
Публикация кода на случай, если jsfiddle не работает:
HTML
Развернуть все Свернуть все Раздел 1 Пункт 1
Раздел 2
Пункт 2
Раздел 3
Пункт 3
[*]Первый элемент списка [*]Перечислите второй элемент [*]Перечислите третий элемент Раздел 4
пункт 4–1
Пункты 4–2
JQuery:
$(function () { $("#аккордеон").accordion({ складной: правда, активный: ложь }); var icon = $( "#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': 'истина', 'табиндекс': '0' }); $('.ui-accordion-header-icon').removeClass(icons.header).addClass(icons.headerSelected); $('.ui-accordion-content').addClass('ui-accordion-content-active').attr({ 'расширенная ария': 'истина', 'ария-скрытая': 'ложь' }).показывать(); $(this).attr("отключено","отключено"); $('.close').removeAttr("отключено"); }); $('.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', 'табиндекс': '-1' }); $('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header); $('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({ 'расширенная ария': 'ложь', 'ария-скрытая': 'истина' }).скрывать(); $(this).attr("отключено","отключено"); $('.open').removeAttr("отключено"); }); $('.ui-accordion-header').click(function () { $('.open').removeAttr("отключено"); $('.close').removeAttr("отключено"); }); }); CSS:
тело { семейство шрифтов: Arial, Tahoma, Verdana, Helvetica, без засечек; размер шрифта: 65%; } .accordion-expand-holder { поле: 10 пикселей 0; } .accordion-expand-holder .open, .accordion-expand-holder .close { поле:0 10px 0 0; } Я хочу, чтобы эти меню были вложенными. Я новичок в JQuery, пожалуйста, будьте осторожны.
Мобильная версия