[英]JQuery Accordion expand/collapse every header without collapsing the expanded headers
我是JQuery世界的新人。 我决定在程序中使用JQuery手风琴控件。 但是我需要的功能似乎不支持手风琴控件。 我需要通过单击它来展开/折叠每个标题,而不折叠展开的标题。 我在JS Bin上找到了一个示例,但它似乎对我不起作用,我正在使用JQuery UI 1.10.3。 我该如何解决? 是否可以覆盖手风琴控制功能以达到目标?
该示例使用jQuery slideToggle函数切换状态。 在JQuery中,还有一些功能:
// "Open" element
$('div').slideDown();
和
// "Close" element
$('div').slideUp();
因此,例如,在手风琴下打开所有div:s:
$('.accordion div').slideDown();
将以下内容添加到您的JS中
$.fn.togglepanels = function(){
return this.each(function(){
$(this).addClass("ui-accordion ui-accordion-icons ui-widget ui-helper-reset")
.find("h3")
.addClass("ui-accordion-header ui-helper-reset ui-state-default ui-corner-top ui-corner-bottom")
.hover(function() { $(this).toggleClass("ui-state-hover"); })
.prepend('<span class="ui-icon ui-icon-triangle-1-e"></span>')
.click(function() {
$(this)
.toggleClass("ui-accordion-header-active ui-state-active ui-state-default ui-corner-bottom")
.find("> .ui-icon").toggleClass("ui-icon-triangle-1-e ui-icon-triangle-1-s").end()
.next().slideToggle();
return false;
})
.next()
.addClass("ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom")
.hide();
});
};
$("#notaccordion").togglepanels();\\GIVE YOUR ACCORDIONID IN THE PLACE OF **#notaccordion**
在您提供的jsbin示例中,将第二行替换为:
$accordionIO.next('div').hide();
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.