0

div要素がクリックされたときに表示したいテキストが非表示になっているページにいくつかのdivがあります。divのクラスを使用してこれを行うにはどうすればよいですか?

これが私のhtmlです：

<div id="post-<?php the_ID(); ?>" <?php post_class('team-member'); ?>>
    <?php echo get_the_post_thumbnail($page->ID, array(441,293)); ?>
    <div class="bio-button">BIO</div>   
       <h2><?php the_title(); ?></h2>
       <h3><?php the_excerpt(); ?></h3>
    <div class="team-text">
       <p><?php the_content(); ?></p>
    </div>
</div>

そして私のjquery：

$('.bio-button').toggle(function () {
   $('.team-text',this).show();
}, function () {
   $('.team-text',this).hide();
return false;
});

繰り返しますが、.team-member 用に複数の div を作成します。.team-text は非表示になり、.bio-button をクリックすると表示されます。

jqueryで何が間違っていますか?

4

3 に答える 3

2

.toggle()はすでに独自の表示/非表示を実行しています。内部に関数を構築する必要はありません。

複数のクラス名をターゲットにすることもできます。 $('.bio-button, .team-text')

于 2013-02-22T21:19:31.237 に答える
1

.team-textクリックされた要素の子要素ではない場合、メソッドsiblingsにtoggle影響を与えることができます：

$('.bio-button').click(function () {
   $(this).siblings('.team-text').toggle();
});

jQuery 1.7 以降、トグル イベント メソッドは廃止され、jQuery 1.9 で削除されたことに注意してください。

アップデート：

$('.bio-button').click(function () {
   $(this).siblings('.team-text').show();
});

$('.team-text .button').click(function () {
   $(this).parent('.team-text').hide();
});
于 2013-02-22T21:20:36.263 に答える
0

toggle()そのような 2 つの関数は必要ありません。トグルは、それらを表示/非表示にするだけです（構成可能なパラメーターを使用）。これはおそらくあなたが必要とするものです：

$('.bio-button').click(function() {
    $(this).next('.team-text').toggle();
}
于 2013-02-22T21:21:20.797 に答える