用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.uj5u.com/qiye/36890.html
標籤：JavaScript
上一篇：面試題：整理