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

时间:2016-06-23 05:46:12

标签: jquery html css

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

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

[% 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标签。非常感谢您的帮助。谢谢!

1 个答案:

答案 0 :(得分:1)

<p>不是<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;
});