前端 展开与闭合

<a id="d1<?php echo $val['id'] ?>" >展开</a>

<div id='d2<?php echo $val['id'] ?>' style=" display:none" class="size_l"><?php echo $val['event_name']; ?></div> 

 <script type="text/javascript">
 $(function() {
 $('#d1<?php echo $val['id'] ?>').click(function() { //给d1绑定一个点击事件;

 /*这个判断的意义是,如果d2是隐藏的,那么让它显示出来,并将d1的文本内容替换成收起,
   如果是显示的,那么就隐藏它并将d1的文本内容替换为展开;*/
if ($('#d2<?php echo $val['id'] ?>').is(':hidden')) {
  $('#d2<?php echo $val['id'] ?>').slideDown('slow');
      $(this).text('收起');
      } else {
      $('#d2<?php echo $val['id'] ?>').slideUp('slow');
      $(this).text('展开');
       }

/*这是一个很简单的事件处理,如果还需要跟上图片的变换,就在判断的对应位置写入图片或者背景变换的代码,*/
      });
    });
</script>

注意：id可以拼接多个参数 来控制多个折叠