JS 简单展开关闭切换代码
第一种方法:原理比较简单通过判断当前是隐藏还是显示的,并以此来判断。
function show()
{
var a=document.getElementById('aa');
a.style.display=="none"?a.style.display="":a.style.display="none";
}
操作
我们 欢迎你
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
第二种:更简单,但原理不是一眼能看出来
能详解的朋友可以留言啊,我们给补充上
function show(){
with(document.getElementById('aa').style){display==""&&(display="none")||(display="")}
}
操作
jb51.net 欢迎你
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关推荐
-
原生JS实现圣旨卷轴展开效果
在其他网站看见类似效果,但代码有400多行且看不懂,我用60多行的代码给予实现. 实现原理:(1)利用绝对定位固定好起始位置:(2)利用遮罩将右轴右侧的部分遮住:(3)让右轴和遮罩同时同速度向右运动! 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>诏书</title> <st
-
一个封装js代码-----展开收起效果示例
第一次靠自己完整的封装的小特效,有点小小的兴奋,和大家分享下,希望能对和我一样在探索的童鞋们有点帮助 js部分: 复制代码 代码如下: var show_obj = function(obj,at,ob){ $(obj).bind('click', function(){ var showTxt = $(this).children(at); //alert($(at).html()); //alert(sObj); //alert(); //alert($(this).parent().chi
-
原生Js与jquery的多组处理, 仅展开一个区块的折叠效果
需求是, 同一个页面, 有多组(不固定), 每组区块数量不一定一样的小区块. 要求每次只展开一个区块. 实现原理其实很简单, 点击导航, 若它的区块为隐藏, 则展开它, 同时, 隐藏掉同组其他区块; 若它的区块为展开, 则隐藏它, 同时, 展开同组其他区块中的一个. 一开始以为仅仅简单的两个遍历就能搞定. 但事实并非如此. 冷静思考了下, 通过点击的元素取到当前组的相关元素, 再单独处理当前组才合理. 顺着这个思路, 功能终于实现了, 写了原生Js版本, 用同样的思路写了个jQ版本. 时间关系,
-
js实现div层缓慢收缩与展开的方法
本文实例讲述了js实现div层缓慢收缩与展开的方法.分享给大家供大家参考.具体分析如下: 这是一个层伸缩与展开的特效代码,带有点动画效果,缓慢展开,DIV+JS联合打造,看上去还不错.不受内容约束,收缩与展开的速度是可以控制的,高度.循环时间也可以改. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&qu
-
js实现点击向下展开的下拉菜单效果代码
本文实例讲述了js实现点击向下展开的下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍js实现点击向下展开的下拉菜单特效代码,无调用jQuery,真正的JS下拉菜单,兼容性方面未做测试,觉得有用处的自己测试修正吧,本文仅提供基础的代码供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//
-
自己写了一个展开和收起的多更能型的js效果
先来看看效果: 具体的功能是: 1.页面上面最多只有一个是显示全部内容的. 2.当自己处于全部显示的时候,点击自己的收起,自己收起. 3.当自己处于全部显示的时候,点击其他的展开是,自己内容隐藏,原来的"收起"变为"展开" 而被点击的选项则内容全部显示,"展开"变为"收起" ================================================= 部分代码: =====================
-
JS实现鼠标点击展开或隐藏表格行的方法
本文实例讲述了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/xhtm
-
用javascript 控制表格行的展开和隐藏的代码
无标题文档 function $(obj) { return document.getElementById(obj); } function close_open() { if($("myTr").currentStyle.display == "none") { $("myTr").style.display = ""; } else { $("myTr").style.display = "
-
javascript实现圣旨卷轴展开效果(代码分享)
效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="jQuery 3.1.1.js"></script> <title>诏书</title> <style ty
-
js实现简单折叠、展开菜单的方法
本文实例讲述了js实现简单折叠.展开菜单的方法.分享给大家供大家参考.具体如下: 这里介绍的是意乱会折叠.展开的菜单导航栏,很老时候写的,CSS没有做美化,如果想用的朋友就自己美化吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-simple-hidden-show-menu-codes/ 具体代码如下: <html> <script> function show(c_Str) {if(document.all(c_Str
随机推荐
- 使用VBS禁用、启动USB存储设备
- JavaScript简单判断复选框是否选中及取出值的方法
- PHP 在数组中搜索给定的简单实例 array_search 函数
- 在Windows平台上升级MySQL注意事项
- jquery SweetAlert插件实现响应式提示框
- 最权威的保养清洁液晶屏的方法及注意事项
- 深入SQL SERVER合并相关操作Union,Except,Intersect的详解
- jQuery Ajax 全解析
- Javascript继承(上)——对象构建介绍
- 微信小程序 扎金花简单实例
- C语言 实现N阶乘的程序代码
- 在XP系统上出现无法定位程序输入点 K32GetProcessMemoryInfo的解决方案
- 详解Android 在 ViewPager 中使用 Fragment 的懒加载
- c#不使用系统api实现可以指定区域屏幕截屏功能
- 浅谈spring-boot-rabbitmq动态管理的方法
- JS实现table表格内针对某列内容进行即时搜索筛选功能
- 探索Linux内核:Kconfig的秘密
- PHP实现的操作数组类库定义与用法示例
- python 除法保留两位小数点的方法
- vue-cli3全面配置详解