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()已经执行了自己的show / hide。无需在内部构建函数。

您还可以定位多个类名：$('.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();
}

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

3 个答案: