0

アコーディオンの中にトグルボタンを作りたいです。これが私がやろうとしていたことです。

Javascript

$j("div a").live('click', function() {
$j("#toggleButton").click(function () {
      $j("#test p").slideToggle("slow");
    });
});

HTML は次のとおりです。

  <div id="accordion">
    <h3><a href="#">Number 1</a></h3><div><h4> Error1:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" id="toggleButton" style="float:right;"><div id="test"> <p>jhfsnv jv jsdhv jsdvb </p></div></div></div>
    <h3><a href="#">Number 2</a></h3><div><h4> Error2:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" id="toggleButton" style="float:right;"><div id="test"> <p>jsa shsbc sjhv sf </p></div></div></div>
  </div>

これが私がやりたいことです：

アコーディオンを開くと、「some contents here」というテキストと「Hide」ボタンが表示されます。非表示ボタンをクリックすると、コンテンツ「jhfsnv jv jsdhv jsdvb」が開きます。

アコーディオンのすべてのオプションで「非表示」ボタンを保持したい。したがって、異なるアコーディオン オプションには非表示ボタンがありますが、内容は異なります。（すべての非表示ボタンのIDとそれらに含まれるテキストを同じに保つ簡単な方法はありますか（ただし、非表示ボタンをクリックしたときのコンテンツは異なります））しかし、これらの異なるコンテンツはすべて異なるアコーディオンオプション内にあります。

4

1 に答える 1

4

これを試してくださいワーキングデモ http://jsfiddle.net/stXP6/ または http://jsfiddle.net/z8Jns/

ああ、あなたの HTML は有効ではありません。クラスを使用して少し修正しました。つまりid、要素のアイデンティティを定義するため、一意である必要があります。

それがあなたのニーズに合うことを願っています:)

コード

$(".test").hide();
$(".toggleButton").click(function() {
    $(this).next(".test").slideToggle("slow");
});​

HTML

<h3><a href="#">Number 1</a></h3><div><h4> Error1:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" class="toggleButton" style="float:right;"><div class="test"> <p>jhfsnv jv jsdhv jsdvb </p></div></div></div>
<h3><a href="#">Number 2</a></h3><div><h4> Error2:</h4><p> some contents here </p><div id="content1"><input type="button" value="Hide" class="toggleButton" style="float:right;"><div class="test"> <p>jsa shsbc sjhv sf </p></div></div></div>
Here​​
于 2012-08-06T04:26:23.213 に答える