简易的点击展开/关闭效果(原生JS版和JQ版)
2011-03-13 21:53
232 查看
可扩展的简易点击展开/关闭效果,分别用原生JavaScript和jQuery实现.使用方法及相关解释,请参见源码.
另,授人以鱼,不如授人以渔.我写的只是一个原型,提供一个思路一种方法.注释中我也注明了,如果你想要酷炫的效果,你可以根据自己的实际需求扩展.
查看演示: 点此查看DEMO
原生JS版本:
JQ版本:
另,授人以鱼,不如授人以渔.我写的只是一个原型,提供一个思路一种方法.注释中我也注明了,如果你想要酷炫的效果,你可以根据自己的实际需求扩展.
查看演示: 点此查看DEMO
原生JS版本:
window.onload = function(){ var divs = document.getElementsByTagName('div');//找到所有div元素 for (var i = 0; i < divs.length; i++) { if (divs[i].className != 'jsdemo') continue;//如果元素class值不是jsdemo,继续查找 //divs[i].style.display='none'; //如果你想默认是隐藏状态,可取消此行注释 var title = divs[i].previousSibling;//通过上一个元素定位到标题元素 if (title.nodeType != 1) { //为了确保找到的是元素节点 title = title.previousSibling; } title.next = divs[i]; //设置标题的next属性并指向div[i] title.onclick = function(){//点击事件 var curStyle = this.next.style.display;//取div[i]的默认display值,现在知道title.next的用意了吧 var newStyle;//定义新的display值 var ico = title.getElementsByTagName('span')[0];//包含展开关闭按钮的节点 if (curStyle == 'none') {//取反实现点击的展开关闭 newStyle = 'block';//当默认值是隐藏时,切换成可见 ico.innerHTML = '-';//切换展开关闭按钮 } else { newStyle = 'none';//当默认值是可见时,切换成隐藏 ico.innerHTML = '+';//切换展开关闭按钮 }; title.next.style.display = newStyle;//为点击后的div[i]赋值 } } }
JQ版本:
$(function(){ var $title = $('div.jqdemo');//找到要显示/隐藏的元素 //$title.hide(); //如果你想默认是隐藏状态,可取消此行注释,下面两个切换函数换位 $title.prev().toggle(function(){//为显示/隐藏元素的前一个元素(取出标题元素)设置点击切换事件 $title.hide().prev().find('span').text('+');//第一次点击时,隐藏div元素,并找到标题元素中的span,切换按钮 }, function(){ $title.show().prev().find('span').text('-');//第二次点击时,显示div元素,并找到标题元素中的span,切换按钮 }); //JQ的代码是不是简洁漂亮的多.哈哈.几句代码就搞定了.通过修改show()/hide()还可以得到很炫酷的效果 });
相关文章推荐
- 简易的点击展开/关闭效果(原生JS版和JQ版)
- 简易的点击展开/关闭效果(原生JS版和JQ版)
- 简易的点击展开/关闭效果(原生JS版和JQ版)
- 最简单的点击展开关闭效果
- 简单的点击展开/关闭效果
- 多组处理, 仅展开一个区块的折叠效果(原生Js和jQ版)
- html中鼠标点击展开关闭层效果
- 原生JS仿QQ阅读点击展开、收起效果
- [原创 js] 点击展开关闭效果
- [原创 js] 点击展开关闭效果
- 多组处理, 仅展开一个区块的折叠效果(原生Js和jQ版)
- 通过ValueAnimator实现点击展开和关闭的效果
- js右下角弹出窗口,点击可关闭效果
- jQuery 关于点击菜单项,使子条目“向上”展开效果的实现
- jquery树形 点击标题展开关闭
- 遮罩层点击按钮弹出并且具有拖动和关闭效果(两种方法)
- 实现checkbox的全选/全不选/点选/行内点选(原生JS版和jQ版)
- js实现点击向下展开的下拉菜单效果代码
- JS原生代码实现鼠标移动图片随之移动效果(另加点击改变图片效果)
- 层展开/关闭 运动缓冲效果