JS 下拉菜单

其实普通的下拉菜单使用css就能够完成，但目前我们只是做最基础的操作，了解和学习JS的方法，所以css不太重要。

首先我们看下效果图：

我们先来分析一下我们js要做什么：

第一眼看去，当鼠标滑入个人设置里面，就会显示下拉菜单，那么这个滑入就对应onmouseover事件，当滑入后，下拉菜单弹出，那么这里我们要控制下拉菜单的显示css。

当鼠标滑出后，菜单关闭，这里对应onmouseout事件，那么依旧是使用连缀的方式来设置js。

html部分：

<header id="header">
    <div class="center">
        <img src="https://www.mulingyuer.com/usr/themes/Yodu/images/logo.png" alt="" class="logo" />
        <ul class="nav">
            <li class="nav-li">
                个人设置
                <ul class="nav-menu">
                    <li class="menu-li">设置</li>
                    <li class="menu-li">换肤</li>
                    <li class="menu-li">帮助</li>
                    <li class="menu-li">退出</li>
                </ul>
            </li>
        </ul>
    </div>
</header>

这里我们将menu菜单放入个人设置的li元素中，这样，当鼠标滑入到下拉菜单时，下拉菜单不会因为超出了个人设置的这个触发区域而消失（下拉菜单也是触发区域的一部分）。

CSS部分：

body,
.nav,
.nav-menu {
    margin: 0;
    padding: 0;
}

#header {
    height: 30px;
    font-size: 12px;
    background-color: #212427;
    background-image: linear-gradient(rgba(255, 255, 255, .1) 70%, rgba(0, 0, 0, .2));
}

.center {
    max-width: 500px;
    margin: 0 auto;
}

.logo {
    vertical-align: middle;
    height: calc(100% - 5px);
    margin-top: 2.5px;
}

.nav {
    float: right;
    color: #fff;
    text-align: center;
}

.nav>.nav-li,
.nav-menu>li {
    list-style: none;
}

.nav>.nav-li,
.nav-menu>li {
    line-height: 30px;
    width: 100px;
    cursor: pointer;
    transition: background-color .3s;
}

.nav-menu {
    background-color: #212427;
    background-image: linear-gradient(rgba(255, 255, 255, .1) 70%, rgba(0, 0, 0, .2));
    height: 0px;
    overflow: hidden;
    transition: height .3s;
}

JS调用：

window.onload = function() {
    $().getclass('nav-li', 'header').hover('滑入时', '滑出时');

}

我们首先获取到class为nav-li的元素集合，且是在id为header元素下的，都添加一个hover方法，这个方法会为每个元素添加一个滑入时做什么，滑出时做什么。

先做一个hover的方法：

Base.prototype.hover = function(over, out) {
    for (var i = 0; i < this.arr.length; i++) {
        this.arr[i].onmouseover = over;
        this.arr[i].onmouseout = out;
    }
    return this;
}；

这样的话我们为每个class为nav-li的元素加上了onmouseover 和onmouseout 事件。

下面我们就要写具体怎么操作了，我们需要让nav-menu的height为120px;因为一共四个选项，每个选项line-height：30px;30*4=120px。

window.onload = function() {
    $().getclass('nav-li', 'header').hover(function() {
        $().getclass('nav-menu', 'header').css(‘height’, ‘120 px’);
    }, function() {
        $().getclass('nav-menu', 'header').css(‘height’, ‘0’);
    });
}

当鼠标滑入时，找到class为nav-menu的元素，设置css中高度为120px；滑出时高度设置为0；这样就可以了。

下面就是深入一点的了：

我们再次看图片时会发现当鼠标滑入的时候，nav-li和下拉菜单中的li都会在鼠标滑入时背景颜色发生改变，所以我们还要对每个元素添加一个hover效果。

那我们可能会这么写：

$().getclass('nav-li', 'header').hover(function() {
        $().getclass('nav-li', 'header').css('background-color', 'rgba(0,0,0,.3)');
        $().getclass('nav-menu', 'header').css('height','120px');
    }, function() {
        $().getclass('nav-li', 'header').css('background-color', 'rgba(0,0,0,0)');
        $().getclass('nav-menu', 'header').css('height', '0');
    });
    $().getclass('menu-li', 'header').hover(function() {
        $().getclass('menu-li', 'header').css('background-color', 'rgba(0,0,0,.3)');
    },function() {
        $().getclass('menu-li', 'header').css('background-color', 'rgba(0,0,0,0)');
    });

效果图：

你会发现当你滑动到任意一个元素上时，所有的元素都改变了背景色，原因就是 $().getclass('menu-li', 'header')和$().getclass('nav-li', 'header')，并不会返回单个元素啊，他是将所有的元素保存在了this.arr数组中的，然后在返回this，你再设置css，实际上for语句会将所有的元素都设置了css，这样导致所有的元素会一起改变，那么怎么办呢？

我们要将arr保存的对象改为单独一个的使用onmouseover和onmouseout的对象，也就是使用事件的元素自己本身，那么第一个切入点就是在 $().getclass('nav-li', 'header').hover(function() {},function(){});这里，这里是为这个每个对象添加事件，那么在function() {}中我们再修改css，那么我们可以将this丢入这个function中，我们都知道在事件函数中，this指向的就是调用这个事件的元素，那么我们只需要将arr重置，并arr[0]=this;就可以了。

重置的话一般可能又要写一个方法了，太过麻烦，毕竟我们$()方法也可以做到一样的效果，他是新建了一个新的实例化对象，其中就有新的arr数组，那么我们在原来的$()基础上稍微改动一下。

var $ = function(_this) {
    return new Base(_this);
}
//这里我们传入this

function Base(_this) {
    this.arr = [];
    if (_this != undefined) {
        this.arr[0] = _this;
    }
}

Base这里我们做if判断，由于我们传入的this并不是字符值，所以undefined不能加引号，然后判断这个this，如果不是undefined，说明有对象传入，那么this.arr[0] = _this; 完美。

调用：

$().getclass('nav-li', 'header').hover(function() {
    $(this).css('background-color', 'rgba(0,0,0,.3)');
    $().getclass('nav-menu', 'header').css('height', '120px')
}, function() {
    $(this).css('background-color', 'rgba(0,0,0,0)');
    $().getclass('nav-menu', 'header').css('height', '0')
});

//下面是对下拉菜单中的li添加背景色
$().getclass('menu-li', 'header').hover(function() {
    $(this).css('background-color', 'rgba(0,0,0,.3)');
}, function() {
    $(this).css('background-color', 'rgba(0,0,0,0)');
})

这样，$(this)可以获取到单独的当前使用事件的元素了。