• 技术文章 >web前端 >js教程

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

    2016-05-16 17:41:02原创627
    先来看看效果:

    具体的功能是
    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);
    }
    };
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:展开 收起
    上一篇:jQuery中(function(){})()执行顺序的理解_jquery 下一篇:Yii-自定义删除确认弹框(zyd)jquery实现代码_jquery
    Web大前端开发直播班

    相关文章推荐

    • 深入聊聊Node.js中的模块化• 总结分享JavaScript变量和数据类型知识点• es6新增数组方法是什么• 你能搞懂JS的this指向问题吗?看看这篇文章• 深入了解JavaScript引擎如何执行JS代码

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网