JS 菜单切换

效果图:

HTML部分：

<div id="sideber">
    <div class="sideber_d">
        <h2 class="sideber_title">要闻</h2>
        <ul class="sideber_ul">
            <li><a href="">日月不肯迟！习近平这样总结2018</a></li>
            <li><a href="">海南键自贸区，和我们普通人有什么关系？</a></li>
            <li><a href="">应对冰雪天气：邵阳194个渡口230艘客渡船全部封渡停航</a></li>
            <li><a href="">11位江苏渔民发现9个危害国家安全的可疑装置</a></li>
            <li><a href="">南方雨雪天气明显减弱 冷空气影响结束回温在即</a></li>
        </ul>
    </div>
    <div class="sideber_d">
        <h2 class="sideber_title">国际 </h2>
        <ul class="sideber_ul">
            <li><a href="">外媒：失踪的马航MH370可能在哈萨克斯坦</a></li>
            <li><a href="">体重800斤多年未曾下地的最胖男子服药自尽</a></li>
            <li><a href="">关于南海 美国又释放了“示威”信号</a></li>
            <li><a href="">6岁女童鼻中取出7厘米多长虫子 疑野外喝水钻进</a></li>
            <li><a href="">台媒：日本"猪年"从中国传过去 但他们的是"野猪"</a></li>
        </ul>
    </div>
    <div class="sideber_d">
        <h2 class="sideber_title">娱乐</h2>
        <ul class="sideber_ul">
            <li><a href="">刘涛对他的不离不弃，真是娱乐圈的一股清流！</a></li>
            <li><a href="">即将60岁的山口百惠近照曝光</a></li>
            <li><a href="">静待真命天子出现 林志玲：我没有放弃</a></li>
            <li><a href="">郭富城携妻女出境，一出镜就被喊错人，在妻子面前丢面</a></li>
            <li><a href="">10年前，林妙可取代她成名，如今林妙可吐槽声不断，她</a></li>
        </ul>
    </div>

</div>

CSS部分：

#sideber {
    position: absolute;
    width: 280px;
    top: 60px;
    right: 30px;
}

#sideber .sideber_title {
    font-size: 18px;
    text-indent: 10px;
    padding: 5px 0;
    border: 1px solid #ccc;
    border-bottom: none;
    color: #444;
    background-color: #eee;
    background-image: linear-gradient(#fff 10%, #e1e1e1, #eee 100%);
    cursor: pointer;
}

#sideber .sideber_ul {
    list-style: none;
    border: 1px solid #ccc;
    margin-bottom: 10px;
    padding: 5px;
    line-height: 30px;
    font-size: 14px;
    height: 150px;
    overflow: hidden;
    opacity: 1;
    filter: alpha(opacity=100);
}

#sideber .sideber_ul li {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-indent: 5px;
}

#sideber .sideber_ul li::before {
    content: "》";
}

#sideber .sideber_ul li a {
    text-decoration: none;
    color: #444;
}

JS调用代码：

//菜单切换
$('#sideber .sideber_title').tagge(function() {
    $(this).next().animation({
        'mul': {
            'o': 0,
            'h': 0
        }
    });
}, function() {
    $(this).next().animation({
        'mul': {
            'o': 100,
            'h': 150
        }
    });
});

给每个标题加上切换器，然后通过this指向这个title本身，然后使用next()方法获取这个title元素的同级下一个元素，然后给这个下一个元素添加动态效果。

上一章的切换器其实还需要修改，因为并不支持this，而且计数器count也是公用的，这样就导致点击一处，计数器为1，你点击下一个元素时，调用的方法为args[1]();而不是重新开始的args[0]方法。

修缮切换器：

//设置切换器
Base.prototype.tagge = function() {
    for (var i = 0; i < this.arr.length; i++) {
        (function(args, elements) {
            var count = 0;
            addEvent(elements, 'click', function() {
                args[count++ % args.length].call(this);
            })
        })(arguments, this.arr[i])
    }
    return this;
}

我们在for循环中使用一个闭包的函数，这个函数闭包的话，就是独立的，每次都是自动运行，创建独立的环境，将count丢到这个闭包里，那么就不是公用的，每个元素都是新的count计数器，为此我们还需要传入arguments和this.arr[i]这两个参数。

最后addEvent匿名函数中，将args[].call(this),将args的作用域指向匿名函数的作用域elements上，elements也就是this.arr[i]，也就是title元素。

工作流程：

DOM加载完毕——给#sideber元素下的 .sideber_title元素添加click事件 ——用户点击title元素——触发事件函数，运行args[0]()——this指向点击的元素，通过next方法获取同级下一个元素——控制高度和透明度。

因为我们使用了this，所以不会出现，点击一个title，其他的都会发生改变，this毕竟只是当前被点击的元素。

获取同级下一个节点：

//筛选节点，返回同级下一个节点
Base.prototype.next = function() {
    for (var i = 0; i < this.arr.length; i++) {
        this.arr[i] = this.arr[i].nextSibling;
        if (this.arr[i].nodeType == 3) this.next();
        if (this.arr[i] == null) throw new Error('获取不到下一个同级元素！');
    }
    return this;
}

这里的next是在$(this)下的，此时的this.arr就只有一个参数，就是title元素本身，for语句循环，将this.arr中的参数替换为nextSibling，同级下一个元素。

然后做个判断，如果获取到的下一个节点是空白节点，他的nodeType=3，那么重新再运行一次next()，再获取这个空白节点的下一个同级 元素，直到获取的不是空白节点才结束重复。

如果获取不到了，也就可能是到底了，那么会返回空，于是在做一个判断，如果this.arr[i] == null，那么就抛出错误。

获取同级下一个节点做好了，上一个节点获取也就很简单了

//筛选节点，返回同级上一个节点
Base.prototype.prev = function() {
    for (var i = 0; i < this.arr.length; i++) {
        this.arr[i] = this.arr[i].previousSibling;
        if (this.arr[i].nodeType == 3) this.prev();
        if (this.arr[i] == null) throw new Error('获取不到上一个同级元素！');
    }
    return this;
}

以上完成。