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

Question

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

我要做的是在每个声明的 div 中显示/隐藏 p 标签。使用 perl 编程使用 FOREACH 声明的每个 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> 的孩子，他们是兄弟姐妹；所以.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;
});