zoukankan      html  css  js  c++  java
  • 基于BootStrap的Collapse折叠(包含回显展开折叠的对应状态)

    情况描述:为了改善页面上的input框太多,采用∧∨折叠展开,这个小东西来控制,第一次做,记录一下ヾ(◍°∇°◍)ノ゙下边是Code

    代码:

    //html代码
    <div id="collapseTwo" class="panel-collapse collapse"> //想要被折叠起来的代码 //就使劲往这里放 //就对了 </div>
    <div class="col-md-1" style="float: right; margin-top: 2px">
    <div data-toggle="collapse" data-parent="#accordion" onclick="clickCollapse()"
    href="#collapseTwo">
    <div id="open">
    <img th:src="@{/assets-new/apps/img/zhankai.png}" title="展开"/><a>展开</a>
    </div>
    <div id="close" hidden="hidden">
    <img th:src="@{/assets-new/apps/img/shouqi.png}" title="关闭"/><a>收起</a>
    </div>
    </div>
    </div>
    //js代码
    <script type="text/javascript">
     function clickCollapse() {
    $('#open').toggle("fast");
    $('#close').toggle("fast");
    }
    </script>
    //js代码 根据折叠展开状态,页面回显与之对应的状态(发送异步请求时候)
    $("#search").click("click", function () {
    var state = $('#collapseTwo').hasClass('in');
    var url = rootPath + "vrx/vouxxXxx/list";
    if (state == true) {
    url += "?panelState=open"
    } else {
    url += "?panelState=close"
    }
    $("#searchForm").ajaxSubmit({
    url: url,
    async: true,
    success: function (data) {
    var tb = $("#loadhtml");
    var topliHtml = $("#topli").html();
    tb.html(CommnUtil.loadingImg());
    tb.html(data);
    $("#topli").html(topliHtml);
    }
    });
    });
    //后台java
    String state = this.getRequest().getParameter("panelState");
    map.addAttribute("state",state);
    return VIEW_PATH + "/list";
    //list.html页面里的js
    <script type="text/javascript" th:inline="javascript" xmlns:th="http://www.w3.org/1999/xhtml">
    var state = [[${state}]];
    if (CommnUtil.notNull(state)) {
    if (state == "open") {
    $('#collapseTwo').collapse('show');
    $('#open').toggle("fast");
    $('#close').toggle("fast");
    }
    }
    </script>
     

    说明:就这么多代码,说实话,关于引入的js什么的我还是不太会找正确的好用的链接Σ(☉▽☉"a丧!

  • 相关阅读:
    团队博客创建
    筼筜湖美景
    作业11-网络
    作业11-多线程
    多线程-冲突与同步代码
    Java第12次实验提纲(JSP简单入门)
    作业-JSP简单入门
    Java Web参考资料
    面向对象设计大作业迭代任务
    在码云(gitee)上展开程序类课程教学
  • 原文地址:https://www.cnblogs.com/xuchao0506/p/9797022.html
Copyright © 2011-2022 走看看