1

jQuery アコーディオン プラグインを使用しています。

テキスト「アコーディオン」をクリックすると、展開されてコンテンツが表示されます。今、私はアコーディオンの下部にそれを閉じるための「閉じる」ボタンもあり、それも正常に機能します。

ここでの要件は、「アコーディオン」をクリックすると、そのテキスト「アコーディオン」を展開して非表示にし、「閉じる」を使用して閉じたときに再び表示する必要があることです。

それを達成する方法は？これまでのところ、私は持っています:

<script>
$(function() {
    $( "#accordion" ).accordion({
      collapsible: true,
      active: false
    });
  });
</script>

と

<div id="accordion">
    <h3>Accordion</h3>
    <div class="accordionBg">
        <p>...text here...</p>
        <p>...text here...</p>

        <div id="accordion">
            <h4>Close</h4>
        </div>

    </div>
</div>

  1. onclick()関数を使用して、このアコーディオンのヘッダーを非表示および表示するにはどうすればよいですか?

    また、重複したIDを使用するとhtml検証エラーが発生すると確信しています。

  2. ID の重複を防ぐにはどうすればよいですか?

4

5 に答える 5

1

これを追加するだけCSS

.ui-state-active { display:none }

これにより、アコーディオンのテキストが非表示になり、閉じるをクリックすると表示されます。

于 2013-10-31T13:44:57.257 に答える
0

1)この回答のコードを使用して、アコーディオンが開いているかどうかを検出できます。

2) ここに記載されているように、コード全体で ID が繰り返される場合は、ID の代わりにクラスを使用する必要があります。

于 2013-10-31T13:44:26.710 に答える
0

「アコーディオン」という見出しのことですか？ID を指定する必要があります。

<h3 id="accordionHeader">Accordion</h3>

次に、ボタンなどにonclickメソッドを追加します

<button onclick='hideHeader()'></button>

最後に、hideHeader メソッドを記述します。

function hideHeader() {
    $("#accordionHeader").innerHTML = "";
}

このメソッドは h3 ブロックを空にし、基本的に非表示にします。

異なるボタンで非表示にする必要がある複数のアコーディオンがある場合は、それらに異なる ID (「accordionHeader1」、「accordionHeader2」など) を割り当てます。

1 つのクエリで複数のアコーディオン ヘッダーを非表示にする場合は、ID の代わりにクラスを使用します。

<h3 class="accordionHeader">Accordion</h3>
function hideHeaders() {
    $(".accordionHeader").innerHTML = "";
}

このコードは、「クラス」が accordionHeader であるすべての要素に同じ変更を適用します。

于 2013-10-31T13:43:31.010 に答える