1.查找兄弟元素

用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