This article has shared the specific code for realizing the effect of the second-level menu for your reference. The specific content is as follows
Mainly dealing with the secondary menu and current clicks:
When clicking on navigation, if there is a secondary menu, switch to the display status of the secondary menu (display or close). If there is no secondary menu, the color will change, indicating that the page is in the current position, and at most one menu can change color in navigation.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>This is av-forNavigation bar</title> <link href="/npm/[email protected]/dist/css/" rel="stylesheet"> <script src="/npm/[email protected]/dist/"></script> <link rel="stylesheet" href="" > </head> <body> <div > <ul > <li class="menu-unit" v-for="menu in menus"> <a v-bind:href="" v-bind:class="{ 'menu-active': && !}" v-on:click="showToggle(menu)" > <i v-bind:class=""></i> <span>{{ }}</span> <i v-if="" v-bind:class=""></i> </a> <ul v-if=" && "> <li v-for="secMenu in " v-on:click="showToggle(menu, secMenu)"> <a v-bind:href="" rel="external nofollow" v-bind:class="{ 'menu-active': }"> <span>{{ }}</span> </a> </li> </ul> </li> </ul> </div> <script> var vm = new Vue({ el: '#side-menu', data: { menus: [ { text: 'front page', icon: 'glyphicon glyphicon-apple', active: false }, { text: 'document', // url: '/', icon: 'glyphicon glyphicon-book', active: false }, { text: 'Boot Page', // url: '/', icon: 'glyphicon glyphicon-send', active: false }, { text: 'Permission Test Page', icon: 'glyphicon glyphicon-lock', downIcon: 'glyphicon glyphicon-menu-down', active: false, secondMenus: [ {text: 'Page Permissions', url: '#', active: false}, {text: 'Permission Directive', url: '#', active: false}, ] }, { text: 'icon', icon: 'glyphicon glyphicon-pawn', active: false, // url: '/' }, ] }, methods: { showToggle: function (menu, secMenu) { // If the secondary menu is passed if (secMenu) { = true; // Update menus data (, menu, secMenu); } else { if () { = !; } else { = true; // Update menus data (, menu, secMenu); } } }, /** * Explanation: The logic of setting active to true on the menu bar can be simplified to: If I click on anyone, I will be active, and other menu items will be active. * false. However, the special case is the secondary menu. After clicking the secondary menu, its own active becomes true, but the active of the parent menu item cannot be changed to false. * So the problem is simplified to: * 1. The active of the clicked menu item becomes true * 2. It is not equal to the active of the menu item I clicked to be false * (But the second-level menu must consider that its parent menu item cannot be changed to false, that is, it will change to false except for the one I clicked and my parent menu item) * * The key problem is: use tree traversal to solve the traversal and active inversion of all menu data items, that is, for each menu item being traversed, * As long as it does not equal the first-level menu and second-level menu I passed in, active becomes false * * Overall logic is: the data items in menus are traversed. If they are not equal to the incoming menu or secMenu, they are directly set to false. * @param menus An array containing menu data items, such as a first-level menu array and a second-level menu array * @param menu The first-level menu item that should be activated * @param secMenu The secondary menu item that should be activated */ refreshMenuTree(menus, menu, secMenu) { // Start traversal (function (item) { // If the menu item is not equal to the first-level menu item or second-level menu item passed, active is set to false if (!(item === menu || item === secMenu || ( && ))) { = false; } // If the menu item contains a secondary menu list, iterate over this list if () { (, menu, secMenu); } // Use .bind(this) to bind this to the outer scope of the function, otherwise the method will not be available }.bind(this)); }, } }) </script> <!-- jQuery (Bootstrap All JavaScript Plugins depend on jQuery，So it must be put in front) --> <script src="/npm/[email protected]/dist/"></script> <!-- load Bootstrap All JavaScript Plugin。你也可以根据需要只load单个Plugin。 --> <script src="/npm/[email protected]/dist/js/"></script> </body> </html>
For more tutorials, click "Front-end component learning tutorial》, everyone is welcome to learn and read.
Regarding the tutorial on components, please click on the topicComponent learning tutorialConduct learning.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.