用JS制作导航显示子菜单(鼠标进入的时候,我们要a标签显示它的兄弟元素 )
HTML:
<nav> <ul> <li><a href="#">关于</a></li> <li><a href="#">技能</a></li> <li> <a class="menutrigger" href="#">作品</a> <span> </span> <p> </p> <ul class="submenu"> <li>作品1</li> <li>作品2</li> <li>作品3</li> </ul> </li> <li> <a class="menutrigger" href="#">博客</a> <ul class="submenu"> <li>博客1</li> <li>博客2</li> <li>博客3</li> </ul> </li> <li><a href="#">日历</a></li> <li><a href="#">联系方式</a></li> <li><a href="#">其他</a></li> </ul> </nav>
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//这里不用x.Target或者aTages[i]因为鼠标位置有可能是在li也可能是在span等上面,这样容易出现BUG,所以直接获取当前操作对象 let brother = a.nextSibling//下一个节点(可能是回车,所以需要找到我们需要找的兄弟元素)-----------------------位置1 while(brother.nodeType ===3){ //若果兄弟元素类型是文本,详细查看下面图片 //不使用if,这里需要通过while循环排除其他一些非所需的兄弟元素,如span等 //使用while(brother.tagName !==‘UL‘)也就是我们要找到是a的ul,如果不是就一直找,注意这的UL要大写 brother = brother.nextSibling } } aTages[i].onmouseleave = function(x){ console.log(‘mouseleave‘)
关于位置1
原文:https://www.cnblogs.com/AmosRhee/p/13324186.html