Detailed steps for the WeChat applet to perform the drop-down menu

Examples of the drop-down menu of a applet. The development tool is version 0.9, but the idea and principle are the same, and it is very suitable for beginners of a applet. Examples of the drop-down menu of a applet. The development tool is version 0.9, but the idea and principle are the same, and it is very suitable for beginners of a applet.

Tips and steps of the applet drop-down menu:

In terms of layout, dl is used for writing as a whole, while the level-2 package is in dd and ul li is used for writing. in terms of interaction, click a level-1 menu to close the sibling menu, click a sub-menu to close all menus.

1. use dt to make the first menu

2. use dd to nest the second-level menu, initially hide and position is absolute, and use z-index to pop up the page layer

/* Total menu container */. menu {display: block; height: 38px;}/* Level-1 menu */. 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;}/* Level-2 menu external container style */. menu dd {position: absolute; width: 100%; top: 39px; left: 0; z-index: 999;}/* Level-2 menu common style */. 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 ;}

View the effect, and then click the event.

3. dt bind the click event tapMainMenu. the flag controls explicit and hidden toggle and provides two classes, Den and show, to control explicit and hidden events. Note: dt can also bindTap, not just view.

/* Display and hide */. show {display: block;}. hidden {display: none;} web front-end development http://www.51xuediannao.com/

4. close all level-1 Menus. each level-1 menu has an index identifier, which is passed by the tapMainMenu event and corresponds to the array subMenuDisplay one by one, the status of the current element subMenuDisplay [index] depends on whether it is displayed or hidden.

Core code:

 
 
    
  
  

    Price 
  
    
  
  
 
   
 
    
Sub1
 
    
Sub2
 
   
 
  
 
 
// Use the function to initialize the array. compared with var initSubMenuDisplay = [], this method avoids reference replication and is more flexible. in the future, it can be implemented in multiple ways, with a variable number of function initSubMenuDisplay () {return ['den den ', 'den den', 'den den '];} Page ({data: {subMenuDisplay: initSubMenuDisplay ()}, tapMainMenu: function (e) {// Obtain the currently displayed first-level menu ID var index = parseInt (e. currentTarget. dataset. index); // generate an array, all of which are hidden. only the current var newSubMenuDisplay = initSubMenuDisplay () is displayed. // if the current display is hidden, and vice versa. At the same time, you need to hide other menus if (this. data. subMenuDisplay [index] = 'den den ') {newSubMenuDisplay [index] = 'show';} else {newSubMenuDisplay [index] = 'den den ';} // Set it to the new array this. setData ({subMenuDisplay: newSubMenuDisplay });}});

5. select the current item of the level-2 menu, but give a System icon and change the background color. The text is bold and the title of the level-1 menu is also changed. a pop-up window is displayed in the demo.

Declare the tapSubMenu method and listen to second-level click events

// Obtain the currently displayed level-1 menu identifier. tapSubMenu: function (e) {var index = parseInt (e. currentTarget. dataset. index); console. log (index); // hide all level-1 menus this. setData ({subMenuDisplay: initSubMenuDisplay ()});} add a highlight effect/* Two-level menu highlight style */. menu li. highlight {background-color: # f4f4f4 ;}

Unlike a level-1 menu, click highlight is implemented using a two-dimensional array to locate a level-1 level-2 menu and decide to hide it. Change the layout file:

 
 
 
        
  
  
 
   
100 or less
 
   
100-500
 
   
500-1000
 
   
1000-3000
 
   
More than 3000
 
  
    
 
 

Effect

The corresponding js code should be written as follows:

// Declare the initialization highlight status array function initSubMenuHighLight () {return ['',''], ['',''], ['','', ''];}

Click event

TapSubMenu: function (e) {// hide all Level 1 menus this. setData ({subMenuDisplay: initSubMenuDisplay ()}); // process the second-level menu. first, obtain the currently displayed second-level menu ID var indexArray = e. currentTarget. dataset. index. split ('-'); console. log ("indexArray:" + indexArray); var newSubMenuHighLight = initSubMenuHighLight (); // unlike the first-level menu, the current status does not need to be determined here, you only need to click and assign highlight to the class. newSubMenuHighLight [indexArray [0] [indexArray [1] = 'highlight'; console. log (newSubMenuHighLight); // Set it to the new array this. setData ({subMenuHighLight: newSubMenuHighLight });}

In this way, highlight and unhighlight are realized. However, unlike the level-1 menu, this menu is not mutually exclusive with the brother menu. that is to say, you cannot remove the highlight state of the brother menu when you click this menu. So we improved the js code.

Declaration method, use the variable form for convenient storage.

// Define the initialization data. it is used to save var initSubMenuHighLight = [['',''], ['',''], ['','', '']; click the event tapSubMenu: function (e) {// hide all Level 1 menus this. setData ({subMenuDisplay: initSubMenuDisplay ()}); // process the second-level menu. first, obtain the currently displayed second-level menu ID var indexArray = e. currentTarget. dataset. index. split ('-'); // Initialization status // var newSubMenuHighLight = initSubMenuHighLight; for (var I = 0; I <initSubMenuHighLight. length; I ++) {// if the menu in the vertex is a level-1 menu First, clear the status, that is, the non-highlighted mode, and then the level-2 menu in the highlights; if it is not the current menu, ignore it. After this processing, the highlighted state of other menus can be retained if (indexArray [0] = I) {for (var j = 0; j <initSubMenuHighLight [I]. length; j ++) {// implement clearing initSubMenuHighLight [I] [j] = '';} // set the second-level menu of the current menu back} // unlike the first-level menu, the current status does not need to be determined here, you only need to click and assign highlight to the class. then, initSubMenuHighLight [indexArray [0] [indexArray [1] = 'highlight'; // Set it to the new array this. setData ({subMenuHighLight: initSubMenuHighLight });}

Functions to be improved:

1. show and hide the animation drop-down list

2. abstract: the callback function is used to listen to the click of each level-2 menu.

3. the data source and display should be separated. the key values of level 1 and Level 2 menus should be independent. The system only recognizes the index and then processes the corresponding clicks, jumps to the page, and filters the results.

4. when you click the level-2 menu, all groups will be cleared.

The preceding steps are detailed for the drop-down menu of the applet. For more information, see other related articles on php Chinese network!