当前位置:Gxlcms > JavaScript > 自己写了一个展开和收起的多更能型的js效果_javascript技巧

自己写了一个展开和收起的多更能型的js效果_javascript技巧

时间:2021-07-01 10:21:17 帮助过:2人阅读

先来看看效果:

具体的功能是
1.页面上面最多只有一个是显示全部内容的。
2.当自己处于全部显示的时候,点击自己的收起,自己收起。
3.当自己处于全部显示的时候,点击其他的展开是,自己内容隐藏,原来的"收起"变为"展开"
而被点击的选项则内容全部显示,"展开"变为"收起"
=================================================
部分代码
=================================================
代码如下:







${info.sender } ${info.content }

删除 |
收起

展开







js代码
代码如下:

/**
* 展开通知和收起通知

* 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("收起");
$("#a_" + id).attr("name", "1");
}else if(a_name == "1"){
$("#span_content_" + id).attr("class","fl symbleDot w500");
$("#a_" + id).html("展开");
$("#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("收起");
$("#a_" + record).attr("name", "1");
}else if(older_name == "1"){
$("#span_content_" + record).attr("class","fl symbleDot w500");
$("#a_" + record).html("展开");
$("#a_" + record).attr("name", "0");
}
//新对象
if(a_name == "0"){
$("#span_content_" + id).attr("class","fl w500");
$("#a_" + id).html("收起");
$("#a_" + id).attr("name", "1");
}else if(a_name == "1"){
$("#span_content_" + id).attr("class","fl symbleDot w500");
$("#a_" + id).html("展开");
$("#a_" + id).attr("name", "0");
}
$("#record").attr("value",id);
}
};

人气教程排行