zoukankan      html  css  js  c++  java
  • 手风琴效果简单实现,修改bootstrap内部事件接口并且自由定义。

    以下均为本人原创,转载请说明出处!

    {

    // 内层DIV手风琴打开关闭事件共通处理(评价得分和要点)
    var subHeadDivIDFst = "#head_d1_" + clickDivID;
    var subShowDivIDFst = "#collapse_d1_" + clickDivID;
    $(subHeadDivIDFst).click(function() {
    doSubDivOpenClose(subHeadDivIDFst, subShowDivIDFst);
    });
    // 内层DIV手风琴打开关闭事件共通处理(相关说明)
    var subHeadDivIDSnd = "#head_d2_" + clickDivID;
    var subShowDivIDSnd = "#collapse_d2_" + clickDivID;
    $(subHeadDivIDSnd).click(function() {
    doSubDivOpenClose(subHeadDivIDSnd, subShowDivIDSnd);
    });
    // 内层DIV手风琴打开关闭事件共通处理(证明材料)
    var subHeadDivIDTrd = "#head_d3_" + clickDivID;
    var subShowDivIDTrd = "#collapse_d3_" + clickDivID;
    $(subHeadDivIDTrd).click(function() {
    doSubDivOpenClose(subHeadDivIDTrd, subShowDivIDTrd);
    });

    }

    /* 内层DIV手风琴打开关闭事件共通处理 */
    function doSubDivOpenClose(subHeadDivID, subShowDivID) {

    // 控制DIV样式设定
    var spanInDiv = $(subHeadDivID).find("span:first");

    if (spanInDiv.prop("class").indexOf("pull-left glyphicon glyphicon-chevron-right") >= 0) {
    // 展开DIV
    $(subShowDivID).slideDown(300);
    spanInDiv.prop("class","pull-left glyphicon glyphicon-chevron-down");
    } else{
    // 折叠DIV
    $(subShowDivID).slideUp(300);
    $(spanInDiv).prop("class","pull-left glyphicon glyphicon-chevron-right");
    }
    }

  • 相关阅读:
    RegExp.$1
    Wide&Deep 模型学习教程
    docker 安装与使用的相关问题
    Centos 防火墙
    odoo ERP 系统安装与使用
    Linux 开机自动启动脚本
    intel RDT技术管理cache和memory_bandwidth
    tensorflow 中 inter_op 和 intra_op
    centos 7 安装 nginx 或 apache,及其比较
    Dependency injection in .NET Core的最佳实践
  • 原文地址:https://www.cnblogs.com/weijieyun/p/6050501.html
Copyright © 2011-2022 走看看