-2

ユーザーがリンクをクリックしたときに、次の構造のテーブルを表示/非表示にしたいと思います。

<div class="container">
    <div class="banner">
        <h2>$header</h2>
    </div>
    <p class="howto">balbalblablablalbalbalbalblabla <a href='#'>link</a></p>
        <table id=table_action class="widefat">
        ...
        </table>
</div>

私はこれを試しましたが、うまくいきません、そして私は理由がわかりません：

jQuery(document).ready(function(){  
    jQuery('.howto a').click(function() {
        jQuery.(this).next('table').toggle();
    });
});

私にとって：jQuery。（this）は、イベントがトリガーされたdom要素を指し、テーブル要素がありますが、私のスニペットの何が問題になっていますか？

ありがとう、ベン

4

2 に答える 2

3

あなたのリンク$('.howto a')は中にあり.howtoます。リンクを呼び出す.next()と、何も返されません。

代わりに、：内でこれを試して.click()ください

jQuery(this).parent().next('table').toggle();

編集

.preventDefault()また、リンクをクリックしたときにデフォルトの動作が発生しないように、を追加することもできます。

jQuery('.howto a').click(function(event) {
    event.preventDefault();
    jQuery(this).parent().next('table').toggle();
});
于 2012-10-03T12:00:37.650 に答える
2

ワーキングフィドル

コード：

 jQuery(this).parent().next('table').toggle();

コードに2つの問題がありました。

  1. jQuery.(this)それ以外のjQuery(this)
  2. アンカー要素を呼び出し.next('table')ていますが、テーブルは親段落要素の隣にあります。.parent()前に呼び出すと、.nextこれが解決されます。
于 2012-10-03T12:01:01.317 に答える