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