1 
<div class="panels">
    <div>
        <h2>
        Test
        </h2>
    </div>
    <div class="inner_panel statict">
         Test2
    </div>
</div>

TestをクリックするとTest2が表示されるようにしたいと思います。そうでない場合は、Test2が表示されません。jqueryを使用してそれを実現するにはどうすればよいですか？

次のことを試しましたが、機能しません。

 $('.inner_panel').hide();

  $('.panels').click(function () {
    $(this).closest('div .inner_panel').toggle();
  });

ファイルにクラスパネルを持つ複数のdivがあるので、[テスト]をクリックして他の「パネル」に影響を与えたくありません。

4

3 に答える 3

1

closestメソッドは、DOM ツリーを下ではなく上に検索します。ここで確認できます。http://api.jquery.com/closest/

.children('div.inner_panel')要素を取得するために使用する必要があるかもしれません。childrenメソッドを使用すると、DOM の 1 レベル下の要素を取得できます。詳細については、http: //api.jquery.com/children/ を確認してください。

于 2012-07-30T23:20:42.670 に答える
0

余分なスペースがあります->$(this).closest('div .inner_panel').toggle();

これは次のようになります。$(this).closest('div.inner_panel').toggle();

ただし.closest()、DOMツリーを上に移動し、兄弟などに移動するため、機能しません。

私はこれを行います：

$('.inner_panel').hide();

$('.panels').click(function () {
  $(this).find('div.inner_panel').toggle();
});

jsbinデモを見る

于 2012-07-30T23:15:35.417 に答える
0 
 $('.inner_panel').hide();

 // Within .panels get the div's which contain an H2
 var containers = $('.panels h2').closest("div");

 // make them clickable
 containers.click(function () {
    // For the clicked panel, get the next element div which 
    // has the inner_panel class
    $(this).next('div.inner_panel').toggle();
 });
于 2012-07-30T23:41:26.270 に答える