JS 菜单切换

61 0

效果图:

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;
}

以上完成。

0
  • 本文分类:JavaScript
  • 本文标签:菜单切换
  • 流行热度:已超过 61 人围观了本文
  • 发布日期:2018年12月31日 - 23时44分01秒
  • 版权申明:本文系作者@木灵鱼儿原创发布在木灵鱼儿站点。未经许可,禁止转载。
微信收款码
微信收款码