这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
展开和收起这样的效果想必大家早就眼熟了吧,利用闲暇时间用 js 写了一个具体功能:当自己处于全部显示的时候,点击自己的收起,自己收起等等感兴趣的你可以参考下哈
先来看看效果:
:
1. 页面上面最多只有一个是显示全部内容的。
2. 当自己处于全部显示的时候,点击自己的收起,自己收起。
3. 当自己处于全部显示的时候,点击其他的展开是,自己内容隐藏,原来的 "收起" 变为 "展开"
而被点击的选项则内容全部显示,"展开" 变为 "收起"
=================================================
部分代码:
=================================================
js 代码
- <tbody>
- <input type="hidden" id="record" value="${qr.count }">
- <c:forEach items="${qr.results }" var="info" varStatus="index">
- <tr id="user_info_${info.id }">
- <td class="userWrapper_right_collect">
- <p class="ml20 clearfix mb10">
- <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>
- </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">
- <span id="span_${info.id }" class="ex_arrow ex_arrowUp mr5">
- </span>
- 收起
- </c:if>
- <c:if test="${!up }">
- <span class="ex_arrow ex_arrowDown mr5">
- </span>
- 展开
- </c:if>
- </a>
- <span class="fr mr10 gray">
- <fmt:formatDate value="${info.createTime}" pattern="yyyy-MM-dd HH:mm:ss"
- />
- </span>
- </td>
- </tr>
- </c:forEach>
- </tbody>
- /**
- * 展开通知和收起通知<br>
- * 1.点击某一个id的展开功能时候,首先所有的关闭,再展开id通知,展开id时候,class='fl w500' class="ex_arrow ex_arrowUp mr5" 收起
- * 2.点击收起某一个id时候,class='fl symbleDot w500' class="ex_arrow ex_arrowDown mr5" 展开
- * @date 2013-3-5
- * @author xhw
- *
- * @param id
- */
- function infoContent(id) {
- var a_name = $("#a_" + id).attr("name");
- var record = $("#record").val();
- if(id == null || id == ""){
- alert("请求出错!");
- }else if(id == record){
- //本身对象(现在点击的和上一步操作的对象是同一个)
- if(a_name == "0"){
- $("#span_content_" + id).attr("class","fl w500");
- $("#a_" + id).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起");
- $("#a_" + id).attr("name", "1");
- }else if(a_name == "1"){
- $("#span_content_" + id).attr("class","fl symbleDot w500");
- $("#a_" + id).html("<span class='ex_arrow ex_arrowDown mr5'></span>展开");
- $("#a_" + id).attr("name", "0");
- //$("#record").attr("value",id);
- }
- }else if(id != record){
- //新对象id,上一次点击对象record
- var older_name = $("#a_"+record).attr("name");
- //上一次点击的对象
- if(older_name == "0"){
- $("#span_content_" + record).attr("class","fl w500");
- $("#a_" + record).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起");
- $("#a_" + record).attr("name", "1");
- }else if(older_name == "1"){
- $("#span_content_" + record).attr("class","fl symbleDot w500");
- $("#a_" + record).html("<span class='ex_arrow ex_arrowDown mr5'></span>展开");
- $("#a_" + record).attr("name", "0");
- }
- //新对象
- if(a_name == "0"){
- $("#span_content_" + id).attr("class","fl w500");
- $("#a_" + id).html("<span class='ex_arrow ex_arrowUp mr5'></span>收起");
- $("#a_" + id).attr("name", "1");
- }else if(a_name == "1"){
- $("#span_content_" + id).attr("class","fl symbleDot w500");
- $("#a_" + id).html("<span class='ex_arrow ex_arrowDown mr5'></span>展开");
- $("#a_" + id).attr("name", "0");
- }
- $("#record").attr("value",id);
- }
- };
来源: http://www.phperz.com/article/17/0705/280832.html