切換功能，以顯示和隱藏與類相關的元素

我有一個頁面上有幾個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名成員組成的多個div，.team文本是隱藏的，並會當點擊.bio-button時顯示。

我在做我的jquery錯誤？

來源

2013-02-22 MGDTech

.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-22 21:20:36 undefined

謝謝你的作品。但是如果我想添加額外的效果怎麼辦？例如，如果我想在div中使用另一個按鈕，現在顯示'關閉'該div？這就是我使用切換功能的原因。對不起，我應該在我原來的問題中說過。 – MGDTech 2013-02-22 21:38:00

@MGDTech不客氣，我已經更新了答案。 – undefined 2013-02-22 21:41:38

噢，好的。你只會做另一個功能。你介意用「這個」和兄弟姐妹解釋這裏的邏輯嗎？ – MGDTech 2013-02-22 22:17:25

.toggle()已經執行了自己的顯示/隱藏。不需要在裏面建立一個函數。

您也可以指定多個類別名稱：$('.bio-button, .team-text')

來源

2013-02-22 21:19:31

這是切換事件方法不切換效果的方法。 – undefined 2013-02-22 21:22:28

toggle()不採取這樣兩種功能。切換顯示/隱藏它們（使用可配置的參數）。這可能是你需要的：

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

來源

2013-02-22 21:21:20

切換功能，以顯示和隱藏與類相關的元素

回答

相關問題