开始学习prototype-类选择器实现折叠

要学习新知识了prototype

先贴下手册地址:[url]http://prototypejs.org/doc/latest/[/url]
中文版:[url]http://blog.51yip.com/manual/prototype/[/url]


我应该很开心,尽管他跟jquery的思想相去甚远,开始学吧,优秀的东西也就那么点

刚才看到一个很牛的观点:在选择到底是学习jQuery和prototype时,之所以选择prototype,是因为prototype比jQuery复杂,人家不想学习简单的,果然是牛人。

不过,对于我来说,是先学习jquery的,现在回过头去学prototype,发现真的不够方便,比较我目前仅仅想使用类选择器实现折叠效果,就花了近3个小时。


不过由于查了不少资料,并亲自实践,慢慢觉得prototype没有那么晦涩难懂了。
其实prototype并不是想象中的那么难,直接看代码吧



<!-- prototype-1.7.js文件下载,详见附件-->
<script type="text/javascript" src="prototype-1.7.js"></script>
<script type="text/javascript">
function show1(){
var _self = arguments[0];
var _ancestors = $(_self).ancestors();
var _parent = _ancestors[0];//祖先顺序:先内后外
var _next = $(_parent).next();
$(_next).toggleClassName('hide');

if($(_self).innerHTML=="展开"){
$(_self).innerHTML = "关闭";
}else if($(_self).innerHTML=="关闭"){
$(_self).innerHTML="展开";
}
}

</script>

<style type="text/css">
.hide{display:none;}
</style>

<div><a href="#" onclick="show1(this)">展开</a></div>
<div class="hide">hahahahah1</div>

<div><a href="#" onclick="show1(this)">展开</a></div>
<div class="hide">hahahahah2</div>

<div><a href="#" onclick="show1(this)">展开</a></div>
<div class="hide">hahahahah3</div>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值