(JSP)列表展開(kāi)和收縮實(shí)現(xiàn)

這個(gè)頁(yè)面做的非常完善，涉及知識(shí)點(diǎn)也比較多：

1.動(dòng)態(tài)給標(biāo)簽添加id

2.金額格式化（每3位加逗號(hào)）

3.外層li拼接的實(shí)現(xiàn)，內(nèi)層table拼接的實(shí)現(xiàn)

4.列表展開(kāi)和收縮的實(shí)現(xiàn)及縮展圖片的變化

5.網(wǎng)絡(luò)請(qǐng)求msg彈框

6.數(shù)組字典解析

7.設(shè)備判斷

8.li和table屬性運(yùn)用

我把本頁(yè)面的請(qǐng)求接口去掉了，這個(gè)不易公開(kāi)，咳咳。有同樣需求的可自取，用到個(gè)別知識(shí)點(diǎn)的可自取。

<%@ page language="java" contentType="text/html; charset=UTF-8"

? ? pageEncoding="UTF-8"%>

? ? <%@ include file="/common/context.jsp"%>

? ? <%@ page import="java.net.*"%>

? ? <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

? ? <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

? ? <%@ taglib uri="http://java.sun.com/jstl/fmt" prefix="fmt"%>

? ? <%@ page isELIgnored="false"%>

? ? <%@ page import="java.util.*"%>

<%@page import="java.text.SimpleDateFormat"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

? <html>

? <head>

? <meta charset="UTF-8">

? ? <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

? ? ? <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

? ? ? <meta content="yes" name="apple-mobile-web-app-capable"/>

? ? ? <meta content="black" name="apple-mobile-web-app-status-bar-style"/>

? ? ? <meta content="telephone=no" name="format-detection"/>

? ? ? <script src="../js/jquery-1.12.4.min.js"></script>

? ? ? <script? src="../js/baseEncode.js" charset=""></script>

? ? ? <link rel="stylesheet" href="../css/register.css">

? ? ? <script src="../js/common.js"></script>

? ? ? <script type="text/javascript" src="../js/cookieutils.js" ></script>

? ? ? <script type="text/javascript" src="../js/toast.js"></script>

? <script>

? <%

? ? String token =request.getParameter("token");

? %>

? ? ? </script>

? <title>智付寶</title>

? <style>

? ul{

? ? list-style: none;

? ? padding-left: 0rem;

? ? padding-right: 0rem;

? }

? .top{

? ? background: #f4f6f7;

? ? height: 1.93rem;

? ? line-height: 1.93rem;

? ? width: 100%;

? }

? .time{

? ? color: #999999;

? ? font-size: 1rem;

? ? float: right;

? ? margin-right: 3%;

? ? height: 100%;

? ? line-height: 100%;

? ? margin-top: 1.01rem;

? ? vertical-align: middle;

? }

? .liView{

? ? background-color: #ffffff;

? ? margin-left: 3%;

? ? margin-right: 3%;

? ? margin-top: 1rem;

? ? margin-bottom: 1rem;

? ? box-shadow:0 2px 5px #EEEEEE;

? }

? .headerView{

? ? height:11.5rem;

? ? line-height: 11.5rem;

? ? width: 94%;

? ? display: inline-block;

? ? margin-left: 3%;

? ? margin-right: 3%;

? ? margin-bottom: 1rem;

? }

? .topView{

? ? height: 3.6rem;

? ? line-height: 3.6rem;

? ? width: 100%;

? ? background-color: #ffffff;

? ? display: inline-block;

? }

? .city{

? ? color: #666666;

? ? font-size: 1.6rem;

? ? margin-left: 0.66rem;

? ? display: inline-block;

? ? float: left;

? }

? .seletImg{

? ? line-height: 2.6rem;

? ? height: 2.6rem;

? ? margin-top: 1rem;

? ? margin-bottom: 1rem;

? ? color: #666666;

? ? margin-right: 0.66rem;

? ? display: inline-block;

? ? float: right;

? }

? .img{

? ? height:50%;

? ? weight:50%;

? }

? .line{

? ? margin-left: 0.66rem;

? ? margin-right: 0.66rem;

? ? height: 1px;

? ? background-color: #EEEEEE;

? ? bottom: 0rem;

? }

? .leftView{

? ? height: 7.9rem;

? ? line-height: 7.9rem;

? ? width: 50%;

? ? float: left;

? ? background-color: #ffffff;

? ? display: inline-block;

? }

? .rightView{

? ? height: 7.9rem;

? ? line-height: 7.9rem;

? ? width: 50%;

? ? float: right;

? ? background-color: #ffffff;

? ? display: inline-block;

? }

? .lv_top{

? ? text-align: center;

? ? color: #E84F47;

? ? font-size: 1.8rem;

? ? height: 4rem;

? ? line-height: 4rem;

? ? margin-top: 1rem;

? }

? .rv_top{

? ? text-align: center;

? ? color: #FF9400;

? ? font-size: 1.8rem;

? ? height: 4rem;

? ? line-height: 4rem;

? ? margin-top: 1rem;

? }

? .v_bottom{

? ? text-align: center;

? ? color: #999999;

? ? font-size: 1.2rem;

? ? height: 3.9rem;

? ? line-height: 3.9rem;

? ? margin-top: -1rem;

? }

? .cityList{

? ? display: none;

? ? width: 94%;

? ? background-color: #ffffff;

? ? margin-left: 3%;

? ? margin-right: 3%;

? ? padding-bottom: 1rem;

? }

? table

? {

? ? ? border-collapse:collapse;

? ? ? width:100%;

? ? ? table-layout: fixed;

? }

? table, th, td {

? ? border: 1px solid rgba(255,150,106, 1);

? }

? th, td {

? ? text-align: center;

? }

? th {

? ? color:#666666;

? ? font-size: 1.2rem;

? ? padding-left:2px;

? ? padding-right:2px;

? ? padding-top:10px;

? ? padding-bottom:10px;

? }

? td {

? ? color:#666666;

? ? font-size: 1.1rem;

? ? padding-left:2px;

? ? padding-right:2px;

? ? padding-top:10px;

? ? padding-bottom:10px;

? }

? .bottom{

? ? margin-top: 1.5rem;

? ? /* position: fixed; */

? ? background:transparent;

? ? height: 1.93rem;

? ? line-height: 1.93rem;

? ? width: 100%;

? ? /* bottom: 2px; */

? }

? .tips{

? ? color: #E84F47;

? ? font-size: 1rem;

? ? float: left;

? ? margin-left: 3%;

? ? height: 100%;

? ? line-height: 100%;

? ? vertical-align: middle;

? }

? .toast-wrap{

? ? ? ? ? opacity: 0;

? ? ? ? ? position: fixed;

? ? ? ? ? left:50%;

? ? ? ? ? width:50%;

? ? ? ? ? transform:translate(-50%,-50%);

? ? ? ? ? word-wrap:break-word;

? ? ? ? ? padding:10px;

? ? ? ? ? text-align: center;

? ? ? ? ? z-index:9999;

? ? ? ? ? font-size:0.9rem;

? ? ? ? ? max-width:90%;

? ? ? ? ? color: #fff;

? ? ? ? ? border-radius: 5px;

? ? ? ? ? background: rgba(0,0,0,0.7);

? ? ? ? ? overflow: hidden;

? ? ? }

? ? ? .toast-msg{

? ? ? ? ? padding: 2px 5px;

? ? ? ? ? border-radius: 5px;

? ? ? ? ? font-size: 0.42rem;

? ? ? }

? ? ? .toastAnimate{

? ? ? ? ? animation: toastKF 2s;

? ? ? }

? </style>

? </head>

? <body>

? ? <div class="content">

? ? ? <div class="mask">

? ? ? ? <div class="top">

? ? ? ? ? <div class="time" id="dataDt">

? ? ? ? <% Date d = new Date(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); String now = df.format(d); %>

? ? ? ? ? ? 統(tǒng)計(jì)時(shí)間：<%=now %>

? ? ? ? ? </div>

? ? ? ? </div>

? ? ? ? <ul id="quickList">

? ? ? ? ? </ul>

? ? ? <!-- toast提示 -->

? ? ? <div class="toast-wrap">

? ? ? ? ? <span class="toast-msg"></span>

? ? ? </div>

? ? ? </div>

? ? ? <div class="bottom">

? ? ? ? <div class="tips">

? ? ? ? ? 準(zhǔn)實(shí)時(shí)數(shù)據(jù)，誤差不超過(guò)5分鐘

? ? ? ? </div>

? ? ? </div>

? ? </div>

? </body>

? <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>

? <script type="text/javascript">

? console.log(window.location);

? console.log("xin");

? var browser = {

? ? ? versions: function () {

? ? ? ? ? var u = navigator.userAgent, app = navigator.appVersion;

? ? ? ? ? return {? ? ? ? //移動(dòng)終端瀏覽器版本信息

? ? ? ? ? ? ? trident: u.indexOf('Trident') > -1, //IE內(nèi)核

? ? ? ? ? ? ? presto: u.indexOf('Presto') > -1, //opera內(nèi)核

? ? ? ? ? ? ? webKit: u.indexOf('AppleWebKit') > -1, //蘋(píng)果、谷歌內(nèi)核

? ? ? ? ? ? ? gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐內(nèi)核

? ? ? ? ? ? ? mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否為移動(dòng)終端

? ? ? ? ? ? ? ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios終端

? ? ? ? ? ? ? android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或uc瀏覽器

? ? ? ? ? ? ? iPhone: u.indexOf('iPhone') > -1, //是否為iPhone或者QQHD瀏覽器

? ? ? ? ? ? ? iPad: u.indexOf('iPad') > -1, //是否iPad

? ? ? ? ? ? ? webApp: u.indexOf('Safari') == -1 //是否web應(yīng)該程序，沒(méi)有頭部與底部

? ? ? ? ? };

? ? ? }(),

? ? ? language: (navigator.browserLanguage || navigator.language).toLowerCase()

? }

? // myChart.setOption(option);

? var checkParam = JSON.stringify({

? ? "token": '<%=token%>'

? });

? $.ajax({

? ? url: "此處是填寫(xiě)你的接口",?

? ? data: checkParam,

? ? type: "post",

? ? contentType: "application/x-www-form-urlencoded; charset=UTF-8",

? ? dataType: "json",

? ? success: function(data) {

? ? ? if(data.returnCode != "MCA00000") {

? ? ? ? setToast(data.returnMsg);

? ? ? } else {

? ? ? // $("#dataDt").text(data.dataDt);

? ? ? for(var i=0;i<data.datas.length;i++){

? ? ? ? ? $("#quickList").append(//外層li拼接的實(shí)現(xiàn)

? ? ? ? ? ? ? '<li class="liView">' +

? ? ? ? ? ? ? '<div class="headerView">'+

? ? ? ? ? ? ? '<div class="topView">'+

? ? ? ? ? ? ? '<div class="city">'+data.datas[i].mercNm+'</div>'+

? ? ? ? ? ? ? '<div class="seletImg" id="seletImg'+i+'">'+//動(dòng)態(tài)給標(biāo)簽添加id

? ? ? ? ? ? ? '<img class="img" id="img'+i+'" src="../img/transactionRecord/icon_hide.png" alt="">'+

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '<div class="line">'+

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '<div class="leftView">'+

? ? ? ? ? ? ? '<div class="lv_top">'+priceSwitch(data.datas[i].sumAmount)+//金額格式化

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '<div class="v_bottom">交易總金額（元）'+

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '<div class="rightView">'+

? ? ? ? ? ? ? '<div class="rv_top">'+priceSwitch(data.datas[i].sumCount)+

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '<div class="v_bottom">交易總筆數(shù)（筆）'+

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '</div>'+

? ? ? ? ? ? ? '<ul class="cityList" id="cityList'+i+'">'+

? ? ? ? ? ? ? '<table id="payList'+i+'">'+

? ? ? ? ? ? ? '<tr>'+

? ? ? ? ? ? ? '<th>'+

? ? ? ? ? ? ? '支付方式</th>'+

? ? ? ? ? ? ? '<th>交易總金額（元）'+

? ? ? ? ? ? ? '</th>'+

? ? ? ? ? ? ? '<th>交易總筆數(shù)（元）'+

? ? ? ? ? ? ? '</th>'+

? ? ? ? ? ? ? '</tr>'+

? ? ? ? ? ? ? '</table>'+

? ? ? ? ? ? ? '</ul>'+

? ? ? ? ? ? ? '</li>'

? ? ? ? ? )

? ? ? ? ? var payInfo =? JSON.parse(data.datas[i].payInfo);//轉(zhuǎn)換為json對(duì)象

? ? ? ? ? var payTypeText='';

? ? ? ? ? for (var j = 0; j <payInfo.length; j++) {

? ? ? ? ? ? if (payInfo[j].payType=="Installment") {

? ? ? ? ? ? ? ? payTypeText='信用卡分期'

? ? ? ? ? ? }

? ? ? ? ? ? if (payInfo[j].payType=="AFixed") {

? ? ? ? ? ? ? ? payTypeText='支付寶'

? ? ? ? ? ? }

? ? ? ? ? ? if (payInfo[j].payType=="POSPAY") {

? ? ? ? ? ? ? ? payTypeText='銀行卡'

? ? ? ? ? ? }

? ? ? ? ? ? if (payInfo[j].payType=="PLive") {

? ? ? ? ? ? ? ? payTypeText='麥保付'

? ? ? ? ? ? }

? ? ? ? ? ? if (payInfo[j].payType=="WFixed") {

? ? ? ? ? ? ? ? payTypeText='微信'

? ? ? ? ? ? }

? ? ? ? ? ? if (payInfo[j].payType=="H5") {

? ? ? ? ? ? ? ? payTypeText='公眾號(hào)'

? ? ? ? ? ? }

? ? ? ? ? ? ? ? ? $("#payList"+i).append(//內(nèi)層table拼接的實(shí)現(xiàn)

? ? ? ? ? ? ? ? ? ? '<tr>'+

? ? ? ? ? ? ? ? ? ? '<td>'+payTypeText+

? ? ? ? ? ? ? ? ? ? '</td>'+

? ? ? ? ? ? ? ? ? ? '<td>'+priceSwitch(payInfo[j].sumAmount)+

? ? ? ? ? ? ? ? ? ? '</td>'+

? ? ? ? ? ? ? ? ? ? '<td>'+priceSwitch(payInfo[j].sumCount)+

? ? ? ? ? ? ? ? ? ? '</td>'+

? ? ? ? ? ? ? ? ? ? '</tr>'

? ? ? ? ? ? ? ? )

? ? ? ? ? }

? ? ? ? };

? ? ? ? //點(diǎn)擊事件展開(kāi)和收縮的實(shí)現(xiàn)及圖片的變化

? ? ? ? $('.liView').click(function(event) {

? ? ? ? ? ? if($("#cityList"+$(this).index()).css("display")=="none"){

? ? ? ? ? ? ? //展示

? ? ? ? ? ? ? hide=false;

? ? ? ? ? ? ? $("#cityList"+$(this).index()).css('display','block');

? ? ? ? ? ? ? $("#img"+$(this).index()).attr("src","../img/transactionRecord/icon_show.png");

? ? ? ? ? ? ? $("#img"+$(this).index()).css("height","30%","width","50%","margin-right", "0.66rem");

? ? ? ? ? ? ? $("#seletImg"+$(this).index()).css("margin-top","1.5rem");

? ? ? ? ? ? }else{

? ? ? ? ? ? ? //隱藏

? ? ? ? ? ? ? hide=true;

? ? ? ? ? ? ? $("#cityList"+$(this).index()).css('display','none');

? ? ? ? ? ? ? $("#img"+$(this).index()).attr("src","../img/transactionRecord/icon_hide.png");

? ? ? ? ? ? ? $("#img"+$(this).index()).css("height","50%","width","50%","margin-right", "0.66rem");

? ? ? ? ? ? ? ? $("#seletImg"+$(this).index()).css("margin-top","1rem");

? ? ? ? ? ? }

? ? ? ? });

? ? ? }

? ? },

? ? error: function(xhr, type) {

? ? ? $('.mask').css('display', 'none');

? ? ? setToast('服務(wù)器開(kāi)小差了，請(qǐng)稍后再試');

? ? }

? })

? ? function priceSwitch(x) {

? ? ? ? //強(qiáng)制保留兩位小數(shù)

? ? ? ? var f = parseFloat(x);

? ? ? ? if (isNaN(f)) return false;

? ? ? ? var s = f.toString();

? ? ? ? var rs = s.indexOf('.');

? ? ? ? //每三位用一個(gè)逗號(hào)隔開(kāi)

? ? ? ? var leftNum=s.split(".")[0];

? ? ? ? var rightNum="."+s.split(".")[1];

? ? ? ? var result;

? ? ? ? //定義數(shù)組記錄截取后的價(jià)格

? ? ? ? var resultArray=new Array();

? ? ? ? if(leftNum.length>3){

? ? ? ? ? ? var i=true;

? ? ? ? ? ? while (i){

? ? ? ? ? ? ? ? resultArray.push(leftNum.slice(-3));

? ? ? ? ? ? ? ? leftNum=leftNum.slice(0,leftNum.length-3);

? ? ? ? ? ? ? ? if(leftNum.length<4){

? ? ? ? ? ? ? ? ? ? i=false;

? ? ? ? ? ? ? ? }

? ? ? ? ? ? }

? ? ? ? ? ? //由于從后向前截取，所以從最后一個(gè)開(kāi)始遍歷并存到一個(gè)新的數(shù)組，順序調(diào)換

? ? ? ? ? ? var sortArray=new Array();

? ? ? ? ? ? for(var i=resultArray.length-1;i>=0;i--){

? ? ? ? ? ? ? ? sortArray.push(resultArray[i]);

? ? ? ? ? ? }

? ? ? ? ? ? result=leftNum+","+sortArray.join(",")+rightNum;

? ? ? ? }else {

? ? ? ? ? ? result=s;

? ? ? ? }

? ? ? ? return result;

? ? }

? function setToast(msg){//網(wǎng)絡(luò)請(qǐng)求msg彈框

? ? ? setTimeout(function(){

? ? ? ? ? document.getElementsByClassName('toast-wrap')[0].getElementsByClassName('toast-msg')[0].innerHTML=msg;

? ? ? ? ? var toastTag = document.getElementsByClassName('toast-wrap')[0];

? ? ? ? ? toastTag.className = toastTag.className.replace('toastAnimate','');

? ? ? ? ? setTimeout(function(){

? ? ? ? ? ? ? toastTag.className = toastTag.className + ' toastAnimate';

? ? ? ? ? }, 100);

? ? ? },500);

? }

? </script>

</html>


最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,142評(píng)論 0贊 2
  • 不會(huì)用代碼框，所以看著有些亂套，，，，html部分 <!DOCTYPE html> 迅雷看看 ...
    這就是個(gè)帥氣的名字閱讀 1,913評(píng)論 0贊 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5？ 答：HTML5是最新的HTML標(biāo)準(zhǔn)。 注意：講述HT...
    kismetajun閱讀 28,817評(píng)論 1贊 45
  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱(chēng)： 工作地點(diǎn) 崗位名...
    lilyping閱讀 2,013評(píng)論 0贊 1
  • 時(shí)常聽(tīng)到這么一句話：“當(dāng)兩人分手后，最好的祝福是彼此放過(guò)?！蔽蚁嘈胚@句話是有前提的，必須是相互還愛(ài)著對(duì)方，我因?yàn)閻?ài)...
    小嘴澄閱讀 892評(píng)論 14贊 6

友情鏈接更多精彩內(nèi)容