微信小程序下拉菜单实例 _菜单

微信小程序下拉菜单实例，小程序的尝鲜制作，开发工具是0.9版，不过思想和原理是一样的，非常适合微信小程序入门。
微信小程序下拉菜单思路与步骤：
布局方面，整体使用dl来写，二级包在dd中，用ul li来写；交互方面，点击某一级菜单，关闭兄弟子菜单，点击某子菜单关闭所有菜单。
1.使用dt做出第一级菜单2.使用dd嵌套第二级菜单，初始隐藏、为，使用z-index浮出页面层
/*总菜单容器*/.menu {display: block;height: 38px;}/*一级菜单*/.menu dt {font-size: 15px;float:left;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;}/*二级菜单外部容器样式*/.menu dd{ position: absolute;width: 100%;top:39px; left:0;z-index:999;}/*二级菜单普通样式*/.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;}
查看效果，接下来实现点击事件。
如图
3.dt绑定点击事件， flag控制显隐，提供2个class,与show ，来控制显隐。注：dt也是可以的，不单是view 。
/* 显示与隐藏 */.show {display: block;}.hidden {display: none;}web前端开发http://www.51xuediannao.com/
4.关闭所有一级菜单，每个一级菜单都有一个index标识，由事件传递过去，与数组一一对应，当前元素[index]视原来状态决定是显示或隐藏。
核心代码：

//使用function初始化array ， 相比var initSubMenuDisplay = [] 既避免的引用复制的 ， 同时方式更灵活 ， 将来可以是多种方式实现 ， 个数也不定的function initSubMenuDisplay() { return ['hidden', 'hidden', 'hidden'];}Page({data:{subMenuDisplay:initSubMenuDisplay()},tapMainMenu: function(e) {//获取当前显示的一级菜单标识var index = parseInt(e.currentTarget.dataset.index);// 生成数组 ， 全为hidden的 ， 只对当前的进行显示var newSubMenuDisplay = initSubMenuDisplay();//如果目前是显示则隐藏 ， 反之亦反之 。同时要隐藏其他的菜单if(this.data.subMenuDisplay[index] == 'hidden') {newSubMenuDisplay[index] = 'show';} else {newSubMenuDisplay[index] = 'hidden';}// 设置为新的数组this.setData({subMenuDisplay: newSubMenuDisplay});}});

5.选中二级菜单当前项，但给个系统icon及改变背景色，文本加粗，同样改变一级菜单标题， demo中给出一个弹窗
声明方法，监听二级点击事件

//获取当前显示的一级菜单标识tapSubMenu: function(e) { var index = parseInt(e.currentTarget.dataset.index);console.log(index);// 隐藏所有一级菜单this.setData({ subMenuDisplay: initSubMenuDisplay() }); }

加效果
/*二级菜单高亮样式*/.menu li.highlight{background-color: #f4f4f4;}
与一级菜单不同，使用二维数组的方式实现点击高亮，这样才能定位到是某一级的某二级菜单，再决定显示隐藏。布局文件改成：