js找弟弟

hover之后动画效果

我们可以在需要hover的元素hover之后用::after {content:''; display:block;}添加一个伪div。

ul li a:hover::after{
  content: '';
  display: block;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height:3px;
  background: red;
  animation: huadong 0.5s;
}
@keyframes huadong{
  0%{
    width: 0;
  }
  100%{
    width: 100%;
  }
}

下拉列表

• html

    <div class="nav">
        <ul>
            <li><a href="#">导航1</a></li>
            <li>
                <a class="menuTagger" href="#">导航2</a>
                <ul class="menu">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
            <li>
                <a class="menuTagger" href="#">导航3</a>
                <ul class="menu">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                </ul>
            </li>
            <li><a href="#">导航4</a></li>
            <li><a href="#">导航5</a></li>
            <li><a href="#">导航6</a></li>
            <li><a href="#">导航7</a></li>
        </ul>
    </div>

• 获取我们需要监听的元素

//通过className获取多个a标签aTags，aTags包装成了一个hash
    <script>
        let aTags = document.getElementsByClassName('menuTagger')
        console.log(aTags)
    </script>

• 遍历监听的元素

    <script>
        let aTags = document.getElementsByClassName('menuTagger')
        for(let i=0; i<aTags.length; i++){  //遍历我们监听的元素
            aTags[i].onmouseenter = function(x){
                console.log(x.currentTarget)//监听的元素
                // console.log(x.target) //用户操作的元素
                //监听的元素和用户操作的元素可能不是一个元素，如果我们遍历的两个a标签中有个span标签，我们监听的是a标签，很可能用户操作的是span标签。由于onmouseenter比较特殊(onclick可以测试)
                
                //此时我们需要我们监听的元素，所以需要x.currentTarget
                
            }
        }
    </script>

• js找弟弟
  我们给x.currentTarget这个变量定义个变量名，然后找到我们的下拉菜单，也就是监听元素a标签的弟弟。nextSibling --下一个元素(弟弟元素)，因为两个元素之间有空格，用nextSibling很有可能找到的是一个文本，不是我们需要的元素，通过继续nextSibling，终于找到了ul。
  找到了一个文本，不是我们需要的
  继续找 找到了ul，这才是我们需要的
  假如中间有很多空格，我们怎么才能确定我们找到的是文本还是节点呢?我们可以递归用while循环来判断我们找到的是文本还是节点，一直寻找到节点。
  弟弟元素的语法和一些值 我们需要记住的是1表示节点，3表示文本

    <script>
        let aTags = document.getElementsByClassName('menuTagger')
        for(let i=0; i<aTags.length; i++){  
            aTags[i].onmouseenter = function(x){
                let a = x.currentTarget
                let brother = a.nextSibling //定义当前弟弟元素为a标签的弟弟元素
                //如果当前弟弟元素的节点类型是3(文本类型)，当前弟弟元素为下一个弟弟的弟弟…不停的找，找到类型不为3为1(节点类型)为止。
                while(brother.nodeType === 3){//1是节点类型，3是文本类型
                    brother = brother.nextSibling 
                }
                console.log(brother)
            }
        }
    </script>

while循环递归寻找节点

如果一个元素后边有很多弟弟元素(节点)，怎么确认找到的是我们需要的节点呢，很简单，borther.tag !=='UL'时，一直寻找找到为UL为止。然后给这个弟弟元素添加一个class，达到我们需要的效果。当鼠标移除时，不需要active这个效果，就移除它。

    <script>
        let aTags = document.getElementsByClassName('menuTagger')
        //添加active
        for(let i=0; i<aTags.length; i++){  
            aTags[i].onmouseenter = function(x){
                let a = x.currentTarget
                let brother = a.nextSibling //定义当前弟弟元素为a标签的弟弟元素
                //如果当前弟弟元素的节点类型不是UL，当前弟弟元素为下一个弟弟的弟弟…不停的找，找到为止。
                while(brother.tagName !== 'UL'){//如果弟弟元素的tagName不是‘UL’ tagName返回是大写的，ul必须是大写，一定要用小写的：brother.tagName.toLowe !== 'UL' === brother.tagName !== 'UL'
                    brother = brother.nextSibling 
                brother.classList.add('active')
                }
            }
        //移除active
        for(let i=0; i<aTags.length; i++){  
            aTags[i].onmouseleave = function(x){
                let a = x.currentTarget
                let brother = a.nextSibling //定义当前弟弟元素为a标签的弟弟元素
                //如果当前弟弟元素的节点类型不是UL，当前弟弟元素为下一个弟弟的弟弟…不停的找，找到为止。
                while(brother.tagName !== 'UL'){//如果弟弟元素的tagName不是‘UL’ tagName返回是大写的，ul必须是大写，一定要用小写的：brother.tagName.toLowe !== 'UL' === brother.tagName !== 'UL'
                    brother = brother.nextSibling 
                brother.classList.remove('active')
                }
            }
        }
    </script>

• BUG1
  鼠标移到监听的a元素上，监听的下拉菜单被触发，这时我们鼠标移动开A标签，查看下拉菜单，发现消失了，因为a和下拉菜单是兄弟关系，是两个元素，应该监听他们的父级元素li标签。

    <script>
        let liTags = document.getElementsByClassName('menuTagger')
        //添加active
        for(let i=0; i<liTags.length; i++){  
            liTags[i].onmouseenter = function(x){
                let li = x.currentTarget
                let brother = li.getElementsByTagName('ul')[0] //getElements【s】 li下有多个子元素，虽然UL只有一项，也必须加上[0]
                brother.classList.add('active')
            }

        //移除active
            liTags[i].onmouseleave = function(x){
                let li = x.currentTarget
                let brother = li.getElementsByTagName('ul')[0]
                brother.classList.remove('active')
            }
        }    
    </script>

• BUG2
  a标签hover之后，ul是active状态，当鼠标移动到下拉菜单时，hover效果消失了，ul还是active状态，a和li都是active状态，直接把active加到li上边，此时就不需要找a元素的弟弟ul了，当鼠标移入li,有active状态，鼠标移出，active状态消失。

<script>
        let liTags = document.getElementsByClassName('menuTagger')
        //添加active
        for(let i=0; i<liTags.length; i++){  
            liTags[i].onmouseenter = function(x){
                x.currentTarget.classList.add('active')             
            }

        //移除active
            liTags[i].onmouseleave = function(x){
                x.currentTarget.classList.remove('active')  
            }
        }    
    </script>

JS只负责切换状态，至于效果就有css来控制

深度截图_选择区域_20180310154533.png

• BUG3
  由于现在js切换的active状态是监听的那些，所以一些未监听的a元素没有active状态。我们可以给父级元素添加class，监听所有父级元素下有所的ul下的li。
  深度截图_选择区域_20180310161349.png