0

アンカーをクリックして div を表示しようとしています。問題は、アンカーが要素の内側にあり、表示する必要がある div がこの要素の外側にあることです。ページには同じクラスの複数の div があるため、関連付けられているものだけを表示したいと考えています。

マークアップは次のとおりです。

<div class="wrapper">
  <div class="trigger">
    <a href="#" class="change">Change</a>
  </div>
  <div class="content">
    <p>Content to be shown when Change is clicked</p>
  </div>
</div>
4

4 に答える 4

1

それがあなたのやりたいことですか？(フィドル)

// dom ready
$(function() {
  $('a.change').on('click', function() {
    // wrapper div
    $(this).parent()
        .next() // .content div
        .show();
    return false; // prevent the link to be followed
  });
});
于 2012-10-24T17:30:50.883 に答える
1

jQuery を使用すると、次のように実行できます。

$('a.change').click(function(e) {
    e.preventDefault();
    $(this).parent().next().toggle();
});

jsFiddle の例

于 2012-10-24T17:31:54.000 に答える
0

親に行き、正しいdivを取得します

$('a.change').click(function(event){
    event.preventDefault();
    $(this).parents('.wrapper').children('.content').show()
}

このようにして、アンカーがどれほど深く埋め込まれているか、またはアンカーに関連してコンテンツ (前、後) がどこにあるかを心配する必要はありません。

同じコードで動作する、異なる構造の div を表示する jsFiddle を追加しました

http://jsfiddle.net/NWqcq/11/

于 2012-10-24T17:32:21.553 に答える
0

これはあなたが何を意味するのですか？

$(".content").hide();
$("a.change").click(function(){    
      $(".content",$(this).closest(".wrapper")).show();
});

ライブデモ: </p>

http://jsfiddle.net/dfkge/

于 2012-10-24T17:35:47.733 に答える