js实例入门(简单展开或关闭)
简直的展开或关闭
.hide{display:none;}
.show{display:block;}
.hand{cursor:pointer;}
.text{padding:10px;background:F3FCFF;line-height:1.3em;border:solid 5px B2DCF9;margin-bottom:7px;}
/*根据点击项,动态加载内容至iframe中
expand(展开),e_d即expand div
container(容器),c即容器缩写
b为bool缩写
n为num缩写
*/
function e_d(obj,n){//这二个参数构成iframe里的子页面。test1.htm/test2.htm/test3.htm
var c = obj.parentNode.nextSibling; /*取父级的下一个节点,跟父级同辈的。*/
var b = ( c.className == 'hide' );
obj.src = 'images/' + (b?'minus':'plus') + '.gif'/*变换+-图片*/
c.className=b?'text':'hide'
if(!c.innerHTML){//如果这一层里没有内容才更新。有内容则不变化
var str = '';
c.innerHTML = str;
}
}
展开1
展开2
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
js实现鼠标悬停图片上时滚动文字说明的方法
本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现鼠标悬停图片上时的滚动文字说明</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function showtip2(current,e,text){ if (document.all&&a
-
js展开闭合效果演示代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&qu
-
js实现双击图片放大单击缩小的方法
本文实例讲述了js实现双击图片放大单击缩小的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>双击图片放大,单击缩小</title> </head> <body> <SCRIPT
-
JS点击链接后慢慢展开隐藏着图片的方法
本文实例讲述了JS点击链接后慢慢展开隐藏着图片的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>JS点击链接后,慢慢展开隐藏着的图片</title> <body> <script language="JavaScript"> var b=0; var c=true; function fade(){ if(document.all); if(c == true){b+=3} i
-
JS 简单展开关闭切换代码
第一种方法:原理比较简单通过判断当前是隐藏还是显示的,并以此来判断. function show() { var a=document.getElementById('aa'); a.style.display=="none"?a.style.display="":a.style.display="none"; } 操作 我们 欢迎你 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 第二种:更简单,但原理不是一眼能看出来能详解的朋友可
-
js鼠标滑过图片震动特效的方法
本文实例讲述了js鼠标滑过图片震动特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>鼠标滑过 图片震动效果</title> <STYLE>.shakeimage { POSITION: re
-
JS实现固定在右下角可展开收缩DIV层的方法
本文实例讲述了JS实现固定在右下角可展开收缩DIV层的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"
-
JS模拟的QQ面板上的多级可展开的菜单
QQ菜单 if (!document.getElementById) document.getElementById = function() { return null; } function initializeMenu(menuId, actuatorId) { var menu = document.getElementById(menuId); var actuator = document.getElementById(actuatorId); if (menu == null ||
-
js实现按钮控制图片360度翻转特效的方法
本文实例讲述了js实现按钮控制图片360度翻转特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现按钮控制图片360度翻转特效</title> <body> <script language="javascript"> var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var o
-
Js操作树节点自动折叠展开的几种方法
1.方法一 复制代码 代码如下: var tree = L5.getCmp('edocOutfileRelationTree'); //增加选择树,节点自动折叠 tree.on("click", function(node,e){ node.getUI().toggleCheck(true); }); tree.root.expand(); 2.方法二 复制代码 代码如下: var tree = L5.getCmp('orgstrutree'); //增加选择树,节点自动折叠 tree
随机推荐
- ajax实现输入提示效果
- AngularJS使用ng-repeat和ng-if实现数据的删选显示效果示例【适用于表单数据的显示】
- Windows下为Python安装Matplotlib模块
- Linux shell脚本编程if语句的使用方法(条件判断)
- 初学者易上手的SSH-struts2 01环境搭建(图文教程)
- VMware给虚拟机安装linux系统
- Fatal error: Call to undefined function curl_init()解决方法
- linux下 C语言对 php 扩展
- c#读写注册表示例分享
- Android应用中使用SharedPreferences类存储数据的方法
- Bootstrap导航条可点击和鼠标悬停显示下拉菜单的实现代码
- 如何通过非数字与字符的方式实现PHP WebShell详解
- nodejs事件的监听与触发的理解分析
- FCK 编辑器焦点问题
- Asp中通过简单的例子理解下ByVal和ByRef的用法
- jquery实现自适应banner焦点图
- sql语句返回主键SCOPE_IDENTITY()
- jQuery实现按键盘方向键翻页特效
- javascript圆盘抽奖程序实现原理和完整代码例子
- JavaScript 类似flash效果的立体图片浏览器