31.项目 1-博客前端：封装库--菜单切换

学习要点：

1.问题所在
2.设置代码

切换效果，就是通过点击来实现不同的效果，而每次点击会步骤执行下一次函数的过程。

一．问题所在

1.参数问题。
2.点击切换计数问题。
3.多个切换物计数。

QQ截图20190517092003.png

二．设置代码

//设置点击切换方法
Base.prototype.toggle = function () {
for (var i = 0; i < this.elements.length; i ++) {
(function (element, args) {
var count = 0;
addEvent(element, 'click', function () {
args[count++ % args.length].call(element);
});
})(this.elements[i], arguments);
}
return this;
};
//左侧菜单
$('#sidebar h2').toggle(function () {
$(this).next().animate({
mul : {
h : 0,
o : 0
}
});
}, function () {
$(this).next().animate({
mul : {
h : 150,
o : 100
}
});
});

HTML 部分

<h2>教育博文</h2>
<ul>
<li><a href="javascript:;">靠自己 95 后女生被 16 所国外名校录取</a></li>
<li><a href="javascript:;">00 后的成长烦恼：压力巨大成隐形杀手</a></li>
<li><a href="javascript:;">一年自学 MIT 的 33 门课? 疯狂学习方法</a></li>
<li><a href="javascript:;">申请赴美读研人数下降 5% 7 年来首遇冷</a></li>
<li><a href="javascript:;">西政“萌招聘”秀出辣椒与美女 被赞</a></li>
</ul>

CSS 部分

#main {
width:900px;
margin:50px auto;
}
#sidebar {
width:250px;
height:500px;
float:left;
}
#sidebar h2 {
width:248px;
height:30px;
line-height:30px;
text-indent:10px;
margin:0;
padding:0;
font-size:14px;
background:url(images/side_h.png);
border:1px solid #ccc;
border-bottom:none;
}
#sidebar ul {
height:150px;
border:1px solid #ccc;
margin:0 0 10px 0;
overflow:hidden;
}
#sidebar ul li {
height:30px;
line-height:30px;
background:url(images/arrow4.gif) no-repeat 12px 45%;
text-indent:30px;
}
#sidebar ul li a {
text-decoration:none;
color:#333;
}
#index {
width:630px;
height:500px;
background:#eee;
float:right;
}

//获取当前同级节点的下一个元素节点
Base.prototype.next = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i] = this.elements[i].nextSibling;
if (this.elements[i] == null) throw new Error('找不到下一个同级元素节点！');
if (this.elements[i].nodeType == 3) this.next();
}
return this;
}
//获取当前同级节点的上一个元素节点
Base.prototype.prev = function () {
for (var i = 0; i < this.elements.length; i ++) {
this.elements[i] = this.elements[i].previousSibling;
if (this.elements[i] == null) throw new Error('找不到上一个同级元素节点！');
if (this.elements[i].nodeType == 3) this.prev();
}
return this;
}

感谢收看本次教程！