jquery - 切换功能以显示和隐藏与类关联的元素

Question

我在一个页面上有几个 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 中做错了什么？

Answer 1

.toggle()已经执行了自己的显示/隐藏。无需在内部构建函数。

您还可以定位多个类名： $('.bio-button, .team-text')

Answer 2

.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();
});

Answer 3

toggle()不采取两个这样的功能。切换只是显示/隐藏它们（使用可配置的参数）。这可能是您需要的：

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