自己写了一个展开和收起的js效果...分享给大家

先来看看效果:

具体的功能是:

1.页面上面最多只有一个是显示全部内容的。

2.当自己处于全部显示的时候,点击自己的收起,自己收起。

3.当自己处于全部显示的时候,点击其他的展开是,自己内容隐藏,原来的"收起"变为"展开"

而被点击的选项则内容全部显示,"展开"变为"收起"

=================================================

部分代码:

=================================================

 1         <tbody>
 2           <input type="hidden" id="record" value="${qr.count }">
 3           <c:forEach items="${qr.results }" var="info" varStatus="index">
 4             <tr id="user_info_${info.id }">
 5               <td class="userWrapper_right_collect">
 6                 <p class="ml20 clearfix mb10">
 7                   <strong class="ex_green_fg mr10 fl">${info.sender }</strong> <span id="span_content_${info.id }" ${index.count eq 1 ? "class='fl w500'" : "class='fl symbleDot w500'" }>${info.content }</span>
 8                 </p> <a href="javascript:void(0)" onclick="cancelThisInfo(${info.id});" class="fr mr20 ex_green_fg">删除</a> <span class="fr ml5 mr5">|</span> <a href="javascript:void(0)" class="fr ex_green_fg" id="a_${info.id }" name="${index.count eq 1 ? '1' : '0' }" onclick="infoContent('${info.id}');"> <c:if test="${index.count eq 1 }" var="up">
 9                     <span id="span_${info.id }" class="ex_arrow ex_arrowUp mr5"> </span>收起
10                   </c:if> <c:if test="${!up }">
11                     <span class="ex_arrow ex_arrowDown mr5"> </span>展开
12                   </c:if>
13               </a> <span class="fr mr10 gray"><fmt:formatDate value="${info.createTime}" pattern="yyyy-MM-dd HH:mm:ss" /></span>
14               </td>
15             </tr>
16           </c:forEach>
17         </tbody>
18       

js代码

 1 /**
 2  * 展开通知和收起通知<br>
 3  * 1.点击某一个id的展开功能时候,首先所有的关闭,再展开id通知,展开id时候,class='fl w500'  class="ex_arrow ex_arrowUp mr5"  收起
 4  * 2.点击收起某一个id时候,class='fl symbleDot w500' class="ex_arrow ex_arrowDown mr5" 展开
 5  * @date 2013-3-5
 6  * @author xhw
 7  *
 8  * @param id
 9  */
10 function infoContent(id) {
11     var a_name = $("#a_" + id).attr("name");
12     var record = $("#record").val();
13     
14     if(id == null || id == ""){
15         alert("请求出错!");
16     }else if(id == record){
17         //本身对象(现在点击的和上一步操作的对象是同一个)
18         if(a_name == "0"){
19             $("#span_content_" + id).attr("class","fl w500");
20             $("#a_" + id).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起");
21             $("#a_" + id).attr("name", "1");
22         }else if(a_name == "1"){
23             $("#span_content_" + id).attr("class","fl symbleDot w500");
24             $("#a_" + id).html("<span class='ex_arrow ex_arrowDown mr5'></span>展开");
25             $("#a_" + id).attr("name", "0");
26             //$("#record").attr("value",id);
27         }
28     }else if(id != record){
29         //新对象id,上一次点击对象record
30         var older_name = $("#a_"+record).attr("name");
31         //上一次点击的对象
32         if(older_name == "0"){
33             $("#span_content_" + record).attr("class","fl w500");
34             $("#a_" + record).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起");
35             $("#a_" + record).attr("name", "1");
36         }else if(older_name == "1"){
37             $("#span_content_" + record).attr("class","fl symbleDot w500");
38             $("#a_" + record).html("<span class='ex_arrow ex_arrowDown mr5'></span>展开");
39             $("#a_" + record).attr("name", "0");
40         }
41         //新对象
42         if(a_name == "0"){
43             $("#span_content_" + id).attr("class","fl w500");
44             $("#a_" + id).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起");
45             $("#a_" + id).attr("name", "1");
46         }else if(a_name == "1"){
47             $("#span_content_" + id).attr("class","fl symbleDot w500");
48             $("#a_" + id).html("<span class='ex_arrow ex_arrowDown mr5'></span>展开");
49             $("#a_" + id).attr("name", "0");
50         }
51         $("#record").attr("value",id);
52     }
53 };

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小L的魔法馆

C++定义一个简单的Computer类

4996
来自专栏Python小屋

使用Python模拟伪随机数生成原理

伪随机数生成有很多种方法,其中一个是这样的:rNew = (a*rOld + b) % (end-start),然后设置rOld = rNew,一般要求用户指定...

2835
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版6.3节虚函数

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

861
来自专栏优启梦

PHP网址缩短算法代码(修复PHP7.0问题)

每个网址用6个字符代替,(32^6) 最多可以拥有1,073,741,824个短网址。当然,你还可以记录更详细的信息,如访问记录,创建时间等。如果真不够用了,还...

5128
来自专栏Android点滴积累

Android高效内存1:一张图片占用多少内存

  在做内存优化的时候,我们发现除了解决内存泄露问题,剩下的就只有想办法减少真实的内存占用。而在App中,大部分内存可能被我们图片占用了,所以减少图片的内存占用...

2286
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版7.1节vector

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

1042
来自专栏weixuqin 的专栏

深度学习之 TensorFlow(三):TensorFlow 源代码解析

2482
来自专栏来自地球男人的部落格

TensorFlow中CNN的两种padding方式“SAME”和“VALID”

在用tensorflow写CNN的时候,调用卷积核api的时候,会有填padding方式的参数,找到源码中的函数定义如下(max pooling也是一样): ...

7135
来自专栏debugeeker的专栏

《coredump问题原理探究》windows版5.2节数组

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xuzhina/article/detai...

1033
来自专栏一场梦

PHP网址缩短算法代码(修复PHP7.0问题)

2083

扫码关注云+社区

领取腾讯云代金券