jquery - 在多个 <div> 中显示/隐藏 <p>

Question

我需要你的帮助。我正在做一个显示管理配置文件的页面。每个管理将显示在一个单独的 div 标签中。如果数据库中有6个人，则显示6个div标签。

我想做的是在声明的每个 div 中显示/隐藏 p 标签。使用 FOREACH 使用 perl 编程声明的每个 div。这是我的代码如下:-

[% FOREACH management = ir.var.ir_Directors.management.format.directors %]
[% NEXT IF management.remarks == 'new'  %]
<div class="full_box ">
    <div class="box_content si_fixed">
        <div class="info full">
        <div class="bod_left"><div class="bod_img">[% IF management.url_image %]<img src="[% management.url_image %]" class="ir_left management_img" alt="[% management.name %]" />[% END %]</div></div>
        <div class="bod_right"><div class="bod_name_design"><h4 class="ir_textMainHighlight">[% management.name %]</h4><br/><div class="bod_designation">[% management.designation %]</div></div>
        <div class="bod_remark">[% management.remarks %]</div>
        <div class="bod_desc"><a class="button" href="#">View Profile</a><br/>
        <p>[% management.description %]</p></div>
        </div>
        </div>
        <div class="clear"></div>           
        </div>
     <div class="box_bottom"></div>
</div>
[% END %]
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.bod_desc p').addClass('hide');

$('a.button').click(function(){
$(this).children('.bod_desc p').toggleClass('hide');
return false;
});
});
</script>

参照上述代码，每当用户点击“按钮”类的链接时；在 div 类“bod_desc”中，它将在 p 标签内显示“management.description”文本。但是，当它显示在浏览器中时，除了我单击“查看配置文件”链接时，一切看起来都很好。它不显示“隐藏”p 标签。非常感谢您的帮助。谢谢!

Answer 1

<p> s 不是 <a> 的 child ，他们是 sibling ；所以.children()行不通。

使用，

$('a.button').click(function(){
    $(this).siblings('p').toggleClass('hide');
    return false;
});

或

$('a.button').click(function(){
    $('p',$(this).closest('.bod_desc')).toggleClass('hide');
    return false;
});