微信小程序下拉菜单效果的实例代码

//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-: 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 = []
/// 初始化DropDownMenu
loadDropDownMenu()
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()
  /