嵌套的Accordion JQuery
我有一个简单的手风琴菜单，我只是从jsfiddle那里得到的。 我想让它嵌套。
点击jsfiddle
如果jsfiddle无效，则发布代码：
HTML
Section 1
Para 1
Section 2
Para 2
Section 3
Para 3
- List item one
- List item two
- List item three
Section 4
para 4 - 1
Para 4 - 2
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的新手请温柔。
只需将ID更改为类，然后嵌套它们，并确保在实例化手风琴时autoHeight:false 。
在这里工作演示http://jsfiddle.net/hEApL/147/
只看到这个fiddel： http ： //jsfiddle.net/hEApL/148/
Section 1
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.
Section 1
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.
你的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"); }); });
这段代码正在使用精美的嵌套手风琴jquery
https://codepen.io/brenden/pen/Kwbpyj
以下示例
$('.toggle').click(function(e) { e.preventDefault(); var $this = $(this); if ($this.next().hasClass('show')) { $this.next().removeClass('show'); $this.next().slideUp(350); } else { $this.parent().parent().find('li .inner').removeClass('show'); $this.parent().parent().find('li .inner').slideUp(350); $this.next().toggleClass('show'); $this.next().slideToggle(350); } });
@import url('https://fonts.googleapis.com/css?family=Pacifico|Open+Sans:300,400,600'); * { box-sizing: border-box; font-family: 'Open Sans',sans-serif; font-weight: 300; } a { text-decoration: none; color: inherit; } body { width: 40%; min-width: 300px; max-width: 400px; margin: 1.5em auto; color: #333; } ul { list-style: none; padding: 0; } ul .inner { padding-left: 1em; overflow: hidden; display: none; } ul li { margin: .5em 0; } ul li a.toggle { width: 100%; display: block; background: rgba(0,0,0,0.78); color: #fefefe; padding: .75em; border-radius: 0.15em; transition: background .3s ease; } ul li a.toggle:hover { background: rgba(0, 0, 0, 0.9); }
- Item 1
- Option 1
- Option 2
- Option 3
- Item 2
- Option 1
- Option 2
- Option 3
- Item 3
- Open Inner
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
- Open Inner #2
Children will automatically close upon closing its parent.
- Option 3
- Item 4
- Technically any number of nested elements
- Another nested element
As long as the inner element has inner as one of its classes then it will be toggled.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas tempus placerat fringilla. Duis a elit et dolor laoreet volutpat. Aliquam ultrices mauris id mattis imperdiet. Aenean cursus ultrices justo et varius. Suspendisse aliquam orci id dui dapibus blandit. In hac habitasse platea dictumst. Sed risus velit, pellentesque eu enim ac, ultricies pretium felis.
- Option 2
- Option 3