0

大家好，我有一组动态创建的手风琴，如果是 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 会丢失其摘要。如果我单击第三个，则相同，第一个折叠有摘要，第二个折叠没有摘要。我该如何管理？谢谢

4

2 回答 2

0

对我来说突出的一个问题是您的 if 语句：

if("#header"+tmpIndex).hasClass('ui-state-active'){...}

应该是

if($("#header"+tmpIndex).hasClass('ui-state-active')){...}

希望这可以帮助。在 jsfiddle.net 上发布一个工作（或不工作）示例以获得更好的帮助。

于 2012-10-29T15:14:09.290 回答
0

你想太多了。请记住，使用 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());
    }
});
于 2012-10-29T15:17:21.510 回答