[英]accordion when collapsed show summary of its content
大家好,我有一组动态创建的手风琴,如果是3手风琴,我将生成以下html代码:
<h3 value="1" id="header1" class="ui-accordion-header ui-helper-reset
ui-state-default ui-corner-all"
role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
<div id="text1">ACCORDION N1</div>
</h3>
<div id="content1">content of accordion n1</div>
<h3 value="2" id="header2" class="ui-accordion-header ui-helper-reset
ui-state-default ui-corner-all"
role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
<div id="text2">ACCORDION N2</div>
</h3>
<div id="content2">content of accordion n2</div>
<h3 value="3" id="header3" class="ui-accordion-header ui-helper-reset
ui-state-default ui-corner-all"
role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
<span class="ui-icon ui-icon-triangle-3-e"></span>
<div id="text3">ACCORDION N3</div>
</h3>
<div id="content3">content of accordion n3</div>
现在,我创建了一个函数以在折叠模式下显示手风琴的摘要,下面是代码:
$('.clickAccordion').click(function(){
var tmpAccordionClicked = $(this);
var tmpIndex = tmpAccordionClicked.attr('value');
var tmpContent = $("#content"+tmpIndex);
if(("#header"+tmpIndex).hasClass('ui-state-active')){
$("#text"+tmpIndex).html("ACCORDION N."+tmpIndex);
}
if(("#header"+tmpIndex).hasClass('ui-state-default')){
$("#text"+tmpIndex).html(tmpContent);
}
});
仅当手风琴中只有一项时,它才能正常工作;否则,如果有一项以上,如果我单击手风琴n.2,则手风琴n.1会丢失其摘要。 如果我单击第三个,则相同,第一个折叠为包含摘要,第二个折叠为不包含摘要。 我该如何处理? 谢谢
我的一个突出问题是您的if语句:
if("#header"+tmpIndex).hasClass('ui-state-active'){...}
应该是
if($("#header"+tmpIndex).hasClass('ui-state-active')){...}
希望这可以帮助。 在jsfiddle.net上发布一个工作(或不工作)的示例以获得更好的帮助。
你想办法了。 记住,使用jQuery,使其保持简单。
如果您坚持使用手册,可以使用以下方法:
$('.clickAccordion').click(function(){
if ($(this).hasClass("ui-state-active")) {
$(this).find("div").html("ACCORDION N." + $(this).index());
}
else {
$(this).find("div").html($(this).next().text());
}
});
然而
如果您使用的是jQueryUI ,则在手风琴的调用中有一种更简单的方法:
$("#accordion").accordion({
activate: function(e, ui) {
ui.oldHeader.html(ui.oldPanel.text());
ui.newHeader.html("ACCORDION N." + ui.newHeader.index());
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.