//wcss/**DropDownMenu**/ /*總菜單容器*/ .menu { display: block; height: 28px; position: relative;} /*一級菜單*/ .menu dt { font-size: 15px; float: left; /*hack*/ width: 33%; height: 38px; border-right: 1px solid #d2d2d2; border-bottom: 1px solid #d2d2d2; text-align: center; background-color: #f4f4f4; color: #5a5a5a; line-height: 38px; z-index: 2;}

/*二級菜單外部容器樣式*/.menu dd { position: absolute; width: 100%; margin-top: 40px; left: 0; z-index: -99;}/*二級菜單普通樣式*/.menu li { font-size: 14px; line-height: 34px; color: #575757; height: 34px; display: block; padding-left: 8px; background-color: #fff; border-bottom: 1px solid #dbdbdb;}/*二級菜單高亮樣式*/.menu li.highlight { background-color: #f4f4f4; color: #48c23d;}/* 顯示與隱藏 */.show { /*display: block;*/ visibility: visible;}.hidden { /*display: none;*/ visibility: hidden;}//wxml <dl class="menu">  <block wx:for="{{reportData}}" wx:key="idMenu" wx:for-item="menuItem" wx:for-index="idMenu">   <dt data-index="{{idMenu}}" bindtap="tapMainMenu">{{menuItem.reportType}}</dt>   <dd class="{{subMenuDisplay[idMenu]}}" animation="{{animationData[idMenu]}}">    <ul wx:for="{{menuItem.chilItem}}" wx:key="chilItem.ID" wx:for-item="chilItem" wx:for-index="idChil">     <li class="{{subMenuHighLight[idMenu][idChil]}}" bindtap="tapSubMenu" data-index="{{idMenu}}-{{idChil}}">{{chilItem.Name}}</li>    </ul>    <picker class="timePicker" mode="date" value="{{dateValue}}" bindchange="datePickerBindchange" start="1999-01-01" end="2999-12-12"> 時間：{{dateValue}}</picker>   </dd>  </block></dl>//js//數據源var ReportDataSync = [  {    reportType: "日報1",    chilItem: [      { ID: 1, Name: "日報1", ReportUrl: "DailyReport.aspx", Type: 1 },      { ID: 2, Name: "日報2", ReportUrl: "DailyReport.aspx", Type: 1 },      { ID: 3, Name: "日報3", ReportUrl: "DailyReport.aspx", Type: 1 }]  },  {    reportType: "目錄2",    chilItem: [      { ID: 1, Name: "目錄1", ReportUrl: "DailyReport.aspx", Type: 2 },      { ID: 2, Name: "目錄2", ReportUrl: "DailyReport.aspx", Type: 2 },      { ID: 3, Name: "目錄3", ReportUrl: "DailyReport.aspx", Type: 2 },      { ID: 4, Name: "目錄4", ReportUrl: "DailyReport.aspx", Type: 2 }]  },  {    reportType: "月報3",    chilItem: [      { ID: 1, Name: "月報1", ReportUrl: "DailyReport.aspx", Type: 1 },      { ID: 2, Name: "月報2", ReportUrl: "DailyReport.aspx", Type: 2 }]  }]//定義字段var initSubMenuDisplay = [] var initSubMenuHighLight = []var initAnimationData = []/// 初始化DropDownMenuloadDropDownMenu()that.setData({  reportData: ReportDataSync,//菜單數據  subMenuDisplay: initSubMenuDisplay, //一級  subMenuHighLight: initSubMenuHighLight, //二級   animationData: initAnimationData //動畫})//一級菜單點擊tapMainMenu: function (e) {  //獲取當前一級菜單標識  var index = parseInt(e.currentTarget.dataset.index);  //改變顯示狀態  for (var i = 0; i < initSubMenuDisplay.length; i++) {    if (i == index) {      if (this.data.subMenuDisplay[index] == "show") {        initSubMenuDisplay[index] = 'hidden'      } else {        initSubMenuDisplay[index] = 'show'      }    } else {      initSubMenuDisplay[i] = 'hidden'    }  }  this.setData({    subMenuDisplay: initSubMenuDisplay  })    this.animation(index)},//二級菜單點擊tapSubMenu: function (e) {  //隱藏所有一級菜單  //this.setData({  //subMenuDisplay: initSubMenuDisplay()  //});  // 當前二級菜單的標識  var indexArray = e.currentTarget.dataset.index.split('-');   // 刪除所在二級菜單樣式  for (var i = 0; i < initSubMenuHighLight.length; i++) {    if (indexArray[0] == i) {      for (var j = 0; j < initSubMenuHighLight[i].length; j++) {        initSubMenuHighLight[i][j] = '';      }    }  }  //給當前二級菜單添加樣式  initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight';  //刷新樣式  this.setData({    subMenuHighLight: initSubMenuHighLight  });   // 設置動畫   this.animation(indexArray[0]);},//菜單動畫animation: function (index) {    // 定義一個動畫   var animation = wx.createAnimation({     duration: 400,    timingFunction: 'linear',  })  // 是顯示還是隱藏  var flag = this.data.subMenuDisplay[index] == 'show' ? 1 : -1;  // 使之Y軸平移  animation.translateY(flag * ((initSubMenuHighLight[index].length + 1) * 38)).step();  // 導出到數據，綁定給view屬性   var animationStr = animation.export();  // 原來的數據   var animationData = this.data.animationData;  animationData[index] = animationStr;  this.setData({    animationData: animationData  });}/// <summary>/// 初始化DropDownMenu/// 1.一級目錄 initSubMenuDisplay ：['hidden']/// 2.二級目錄 initSubMenuHighLight ：[['',''],['','','','']]]/// </summary>function loadDropDownMenu() {  for (var i = 0; i < ReportDataSync.length; i++) {    //一級目錄    initSubMenuDisplay.push('hidden')    //二級目錄    var report = []    for (var j = 0; j < ReportDataSync[i].chilItem.length; j++) {      report.push([''])    }    initSubMenuHighLight.push(report)       //動畫    initAnimationData.push("")  }}