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");
    }
    }

  • 相关阅读:
    百度病了,必应挂了,Yandex疯了。
    SpringBoot从零单排 ------ 拦截器的使用
    SpringBoot从零单排 ------初级入门篇
    我为什么放弃MySQL?最终选择了MongoDB
    NSURL组成部分详解
    关于MPMoviePlayerController 缓存播放的一些技术准备
    动画系列收藏
    代码简化
    自动循环滚动ScrollView
    iOS WKWebView 使用笔记
  • 原文地址:https://www.cnblogs.com/weijieyun/p/6050501.html
Copyright © 2011-2022 走看看