正在加载中

最后更新于 2018年12月31日

效果图:

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

以上完成。

  • weixiao kaixin tushetou jingkong deyi fanu liezui liuhan daku ganga bishi nanguo lihai qian yiwen numu tu yi haixiu se fadai minyan hehe henkaixin huaji biyiyan kuanghan maimeng shui xiaku penqi zhangzui pen aini ye niu laji ok chigua renshi kongbu shuai xiaoxiese touxiao huaixiao jingnu chihuai kaisang xiaoku koubi zhuangbi lianhong kanbujian shafa zhijing xiangjiao dabian yaowan redjing lazhu rizhi duocang chixigua hejiu xixi xiaopen goukun xiaobuchu shenme wusuowei guancha lajing chouyan xiaochi bie zhadanzui zhadanxiao

登录