1. Find sibling elements

Time:2021-2-16

Making navigation display submenu with JS

HTML:

about
                skill
                
                    works
                     
                     
                    
                        works1
                        works2
                        works3
                    
                
                
                    Blog
                    
                        Blog1
                        Blog2
                        Blog3
                    
                
                calendar
                contact information
                other

 

 

JS:

let aTages = document.getElementsByClassName('menutrigger')
            console.log(aTages)
            for(let i = 0; i < aTages.length; i++){
                aTages[i].onmouseenter = function(x){
                    console.log('mouseenter')
                    Let a = x.currenttarget // here, we don't use x.target or atages [i] because the mouse position may be Li or span, which is prone to bugs, so we can get the current operation object directly
                    Let brother = a.nextsibling // next node
                    while( brother.nodeType  ===3) {// if the sibling element type is text, see the following image for details
                    //Instead of using if, you need to exclude other unnecessary sibling elements, such as span, through the while loop
                    //Using while( brother.tagName  ! ='ul '), that is, we need to find the UL of A. if not, we need to keep looking for it. Note that the UL here should be capitalized
                        brother = brother.nextSibling
                    }
                }
                aTages[i].onmouseleave = function(x){
                    console.log('mouseleave')

 

 

 

About position 1

 

Recommended Today

SQL exercise 20 – Modeling & Reporting

This blog is used to review and sort out the common topic modeling architecture, analysis oriented architecture and integration topic reports in data warehouse. I have uploaded these reports to GitHub. If you are interested, you can have a lookAddress:https://github.com/nino-laiqiu/TiTanI recorded a relatively complete development process in my hexo blog deployed on GitHub. You can […]