jquery-ui-accordion 相关问题

来自jquery-ui的Accordion小部件，显示可折叠的内容面板，用于在有限的空间内显示信息。

jQuery UI 手风琴激活

我不知道如何做到这一点，或者我是否可以做到这一点。我有一个 jQuery UI Accordion，多个部分，每个部分包含多个锚标记，每个锚标记都有一个唯一的字符串 id。我想成为...

jquery accordion jquery-ui-accordion

回答 14 投票 0

jQuery UI：类型错误：$(...).accordion 不是函数

由于某种原因，jQuery UI Accordion 无法工作。我不断收到此错误：类型错误：$(...).accordion 不是函数我究竟做错了什么？基于本网站上 sim 上的其他答案...

javascript jquery jquery-ui jquery-ui-accordion

回答 5 投票 0

嵌套手风琴 JQuery

我有一个简单的手风琴菜单，仅从 jsfiddle 获得。我想让它嵌套。点击jsfiddle 发布代码以防 jsfiddle 不起作用：超文本标记语言我有一个简单的手风琴菜单，仅从 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 新手，请温柔一点。只需看看这个小提琴：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>  <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>  </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"); }); }); 此代码在嵌套手风琴 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); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="accordion"> <li> <a class="toggle" href="javascript:void(0);">Item 1</a> <ul class="inner"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </li> <li> <a class="toggle" href="javascript:void(0);">Item 2</a> <ul class="inner"> <li>Option 1</li> <li>Option 2</li> <li>Option 3</li> </ul> </li> <li> <a class="toggle" href="javascript:void(0);">Item 3</a> <ul class="inner"> <li> <a href="#" class="toggle">Open Inner</a> <div class="inner"> <p> 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. </p> </div> </li> <li> <a href="#" class="toggle">Open Inner #2</a> <div class="inner"> <p> Children will automatically close upon closing its parent. </p> </div> </li> <li>Option 3</li> </ul> </li> <li> <a class="toggle" href="javascript:void(0);">Item 4</a> <ul class="inner"> <li> <a href="#" class="toggle">Technically any number of nested elements</a> <ul class="inner"> <li> <a href="#" class="toggle">Another nested element</a> <div class="inner"> <p> As long as the inner element has inner as one of its classes then it will be toggled. </p> <p> 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. </p> </div> </li> </ul> </li> <li>Option 2</li> <li>Option 3</li> </ul> </li> </ul>

jquery jquery-ui-accordion

回答 2 投票 0

我需要完全隐藏一个 JQuery 手风琴

如何完全隐藏 JQuery 手风琴？我在搜索时能找到的所有内容都只解释了如何折叠和展开手风琴。不是如何让它完全消失。

jquery jquery-ui-accordion

回答 1 投票 0

jQuery 手风琴字段在面板可见时不会刷新

我有一个 ASPX 页面，其中包含一个定义为 jQuery 手风琴的面板，该面板在加载页面时开始隐藏。单击面板应该会刷新其中的值。这是重新...

asp.net jquery-ui-accordion

回答 0 投票 0

在手风琴中使用nicescroll的问题。

我在我的网站上有一个jquery手风琴，并在手风琴第一部分的div上放置了一个nicescroll。当我移动到手风琴的下一部分，并显示新的内容时， ...