小程序多级下拉菜单demo

最近公司需要开发小程序，中间碰到需要下拉面板选择的功能。在网上寻找demo，然后自己进行了一定的更改。

截图：

不多说，直接 上代码

.wxml

<view class='selectarea'>
    <dl class="menu">
      <block wx:for="{
  {menuContent}}" wx:for-index='index' wx:for-item='value'>
        <dt class="{
  {menuCss[index]}} btnarea" data-index="{
  {index}}" bindtap="tapMainMenu">
          <text class='textarea greycolor'>{
  {value.title}}</text>
          <image class='{
  {rotateRight[index]}} icon-img' src='/images/icon-arrowdown.png'></image>
        </dt>
        <dd class="{
  {subMenuDisplay[index]}} font-sm">
          <ul>
            <block wx:for="{
  {value.content}}" wx:for-index='indexc' wx:for-item='valuec'>
              <li class="{
  {subMenuHighLight[index][indexc]}} font-xs" data-index="{
  {index}}-{
  {indexc}}" bindtap="tapSubMenu">
                {
  {valuec}}
              </li>
            </block>
          </ul>
        </dd>
      </block>
    </dl>
  </view>

.js

// pages/second/index/index.js

//定义初始化下拉列表全部设置为隐藏

function initSubMenuDisplay () {

return [ 'hidden' , 'hidden' , 'hidden' , 'hidden' ];

};

//定义初始化menu样式

function menuCss() {

    return ['ordinary', 'ordinary', 'ordinary', 'ordinary'];

};

//定义初始化menu右侧箭头旋转样式

function rotateRight() {

return [ '' , '' , '' , '' , '' ];

};

//定义初始化背景遮罩

var cover = "" ;

//定义初始化菜单选中的高亮样式存储

var initSubMenuHighLight = [

[