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);
            }
    });

アコーディオンにアイテムが 1 つしかない場合にのみ適切に機能します。それ以外の場合は、複数のアイテムがある場合、アコーディオン n.2 をクリックすると、アコーディオン n.1 の概要が失われます。3 番目をクリックすると、1 番目は要約付きで折りたたまれ、2 番目は要約なしで折りたたまれます。どうすればそれを管理できますか? ありがとう

4

2 に答える 2

0

私にとって際立っている問題の 1 つは、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 に答える