How to use JavaScript to realize scalable second-level menu

This article focuses on "how to use JavaScript to achieve scalable secondary menu", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use JavaScript to achieve scalable secondary menus.

The details are as follows

Telescopic secondary menu:

Case description: the effect picture is as follows. Only one can be opened at a time. After opening, the + sign changes.

HTML code

Li {/ * cancel li dot * / list-style: none;} li span {/ * set the background image to the span tag (small plus sign minus sign, no-repeat not loop, initial position 0) * / background: url (add.png) no-repeat left center; padding-left: 20px;} / * start style * / li ul {height: 0 / * overflow hiding * / overflow: hidden; / * add transition effect * / transition: all 0.5s;} / * unfold style * / .open {background-image: url (minus.png);} .open + ul {height: 70px } attendance management daily attendance leave application overtime travel information center daily attendance leave application overtime business trip coordination daily attendance attendance Ask for leave to apply for overtime travel

JavaScript code

/ / stretch list / / implementation idea: var spans = document.querySelectorAll (".tree span"); for (var I = 0; I)

< spans.length; i++) { spans[i].onclick = function () { // console.log(this); // 查找要修改的元素 span 自己 // 修改，删除或添加 class ->

Open / / determine whether you have open on your body, and if so, delete! / / this-> point to the element that triggered the event itself if (this.className = = "open") {/ / if so, delete! This.className = ";} else {/ / if not, add and delete others that are already open! / / find the open (li of the open attribute) var openSpan = document.querySelector (".tree. Open") if (openSpan! = = null) {/ / if the collection is not empty, delete their open attribute openSpan.className = ";} / set yourself the open attribute this.className =" open " }}}

At this point, I believe you have a deeper understanding of "how to use JavaScript to achieve scalable secondary menu". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!