2

<p>クリックすると下に表示される5つのタグが必要です<div>。<p>それぞれに異なる名前を付けることでそれを行うことができますが、それ<div>は多くのjQueryにつながります。

だから、現時点で私は持っています：

<p class="flip">Example</p>
<div class="panel">
  <p>Example Panel</p>
</div><!--End panel-->

<p class="flip">Example</p>
<div class="panel">
  <p>Example Panel</p>
</div><!--End panel-->

<p class="flip">Example</p>
<div class="panel">
  <p>Example Panel</p>
</div><!--End panel-->

私が現在持っているjQueryは次のとおりです。

$(document).ready(function() {
  $('.flip').click(function() {
    $('.panel').slideToggle('slow');
  });
});

これは明らか.panelsに一度にすべてを切り替えます。明確にするために、私は最初のものを最初の.flipものに切り替えたい.panel.

4

2 に答える 2

3

クリックされ<div class="panel">た要素に関連する正しい要素を選択するには、いくつかの単純なDOMトラバーサルを実行する必要があります。<p class="flip">

$('.flip').click(function(e) {
    $(this).next('div.panel').slideToggle('slow');
});

clickイベントハンドラ関数内にthisは、<p>クリックされた要素があります。DOMの次の要素がであり、クラスがである場合、呼び出し.next('div.panel')はDOM内の次の要素を選択します。<div>panel

于 2013-03-07T13:26:10.867 に答える