Native JS implements N-level menu code, js implements n

Native JS implements N-level menu code, js implements n

Requirement Analysis

After a simple analysis, to implement N-level menus, we should first start with the layout, that is, determine whether there are sub-menus

1. There is no next-level menu, which can be directly arranged

2. There are sub-menus, which can be divided into sub-menu emission locations. They are similar to the '>' symbol displayed in the parent menu, and the effect is as follows:

Figure: 1

Initial Implementation

1. Whether the implementation exists>

Note: Which of the following concerns are xxx ===yyy? Xxx: xxx uses a ternary expression to express its thoughts.

The HTML structure is as follows:

Figure: 2

• To achieve the effect shown in figure 1, we only need to judge the children. length = 2 in the li label? 'Span exist': 'span delete'

2. Position of the lower menu

The HTML structure is as follows:

• To meet this requirement, you also need to determine children. length = 2? 'The upper-level menu is relatively located, top is 0, left is the upper-level offsetWidth, and lower-level menu is absolutely positioned ': 'No processing is done'

The specific code is implemented

As follows:

The Code is as follows:

<! DOCTYPE html> 
The above is the native JS Code for implementing the N-level menu introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave a message. The editor will reply to you in time!