JS实现的展开隐藏效果

最新推荐文章于 2022-01-19 20:51:54 发布

转载最新推荐文章于 2022-01-19 20:51:54 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/guanjie20/archive/2009/03/13/1410415.html

文章标签：

#javascript #ViewUI

JS实现的展开隐藏效果

利用JS实现展开隐藏效果:

Code
1

<html>
2

<head>
3

<title>JS实现展开隐藏</title>
4

function showhidediv(id)

{
6

try

{
7

var id1=document.getElementById(id);
9

id3.value="收缩";
10

if(id1)
11

{
12

if(id2.style.display=='block')
13

{
14

id2.style.display='none';
15

id3.value="展开";
16

}
17

else
18

{
19

id2.style.display='block';
20

}
21

}
22

}
23

catch(e)

{}
24

}
25

</script>
26

<body>
27

<div id="id1">
28

<!--
29

<div onclick='showhidediv("id1");' style="color:red;">点击标题</div>-->
30

<input type="button" value="展开" onclick='showhidediv("id1");' id="id3" style="background-color:white;">
31

<div id="id2" style="display:none;">
32

id2层的内容<br>id2层的内容<br>id2层的内容<br>id2层的内容<br>id2层的内容<br>
33

id2层的内容<br>id2层的内容<br>id2层的内容<br>id2层的内容<br>id2层的内容<br>
34

</div>
35

</body>
36

</head>
37

</html>
38

posted on 2009-03-13 11:41 搏击的小船阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/guanjie20/archive/2009/03/13/1410415.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

詹小布

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

js控制层展开隐藏

shirleyrong的专栏

10-08

871

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/1999/xhtml">无标题文档#content,#intro{font: 13px/25px;width: 200px;height: 40px;background: #eee;padding: 10px;border: 4px #ccc d

JS-下拉菜单-点击展开/隐藏

mooncameout的博客

04-16

1144

百度了好几天没找到想要的答案，今天在上吃饭的时候想说在B站随便搜一下，结果第一个就是我想要的效果，试了一下还完全没问题。不知道该为终于找到的答案兴奋，还是该为用了好几天终于验证了自己就是个智障而神伤。 window.onload=function () { var a=document.getElementById('yi'); // 通过classname获取到有多个值，所以必须通...

参与评论您还未登录，请先登录后发表或查看评论

js实现点击展开隐藏效果（实例代码）

10-17

本篇文章小编给大家带来一篇关于JS实现点击展开点击隐藏的效果代码内容，有兴趣的朋友参考下。

JavaScript实现下拉菜单的显示和隐藏

11-26

我们这一篇来用JavaScript脚本实现下拉菜单的显示和隐藏。使用JavaScript方法实现我们需要用的知识有： 1)JS事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2)JS基础语法：使用function关键字定义函数。 3)DOM编程：getElementsByTagName()方法。那么接下来就是我们制作的流程： 1)隐藏二级菜单：设置CSS样式,让二级菜单隐藏。 2)编写显示子菜单showsub()函数：使用getElementsByTagName获取二级菜单项；通过style.display设置二级菜单显示。 3)编写隐藏子菜单hidesub()

CSS JS点击展开/隐藏的折叠菜单.rar

07-04

CSS JS点击展开/隐藏的折叠菜单

javascript实现table单元格点击展开隐藏效果(实例代码)

10-20

在Web开发中，使用JavaScript实现HTML表格（table）单元格的...以上就是使用JavaScript实现table单元格点击展开隐藏效果的知识点。通过理解和应用这些知识点，开发者可以创建出更加互动和用户友好的表格数据展示界面。

基于JavaScript实现点击展开隐藏功能的示例代码

最新发布

08-09

总结来说，JavaScript 实现点击展开隐藏效果主要涉及 HTML 元素的布局、CSS 的样式控制以及 JavaScript 的事件处理。通过监听点击事件并动态改变元素的样式，可以实现丰富的交互功能。在实际开发中，可以结合现代...

原生JS实现圣旨卷轴展开效果

10-20

标签中的“卷轴展开效果”和“js 卷轴展开动画效果”进一步强调了这个主题是关于JavaScript实现的动态卷轴展示。JavaScript是一种广泛使用的客户端脚本语言，常用于网页交互功能的开发，这里用于创建动画效果。 ...

简单JavaScript菜单栏的扩展与隐藏

zuoxianshen的博客

10-30

1157

在这里插入代码片@TOC 欢迎使用Markdown编辑器你好！这是你第一次使用 Markdown编辑器所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。新的改变我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客：全新的界面设计，将会带来全新的写作体验；在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式

Angular响应式开发中报错Property ‘map‘ does not exist on type ‘Observable＜Response＞‘.引用rxjs也没用。

Pumily的脱发历程

07-18

3087

传送门，点击我！

菜单的展开与隐藏特效

06-04

jQuery是一套跨浏览器的JavaScript库，简化HTML与JavaScript之间的操作。由John Resig在2006年1月的BarCamp NYC上发布第一个版本。目前是由 Dave Methvin 领导的开发团队进行开发。全球前10000个访问最高的网站中，有59%使用了jQuery，是目前最受欢迎的JavaScript库。本实例展示了网页中最常见的菜单的展开与隐藏特效，适用于JQuery初学者。

js-实现可展开隐藏导航菜单按钮特效.zip

07-11

简单实用可展开隐藏导航菜单按钮js特效代码下载。这款菜单的特点是点击按钮时可以展开菜单，展开的时候带有弹性的动画特效，效果相当酷。菜单项是一些小图标，当然你也可以使用图标结合文字的方式，由于隐藏/展开的方式相对节省空间，因此这款菜单可以应用在移动设备上。

js实现展开收起菜单

05-22

js 实现菜单的展开收起，构建网站能有比较好的效果

JS实现鼠标点击展开或隐藏表格行的方法

12-02

本文实例讲述了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=”Content-Type” content=”text/html; charset=utf-8″ /> <t

div+css+js实现菜单的收缩与展开

06-22

div+css+js实现菜单的收缩与展开! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.youkuaiyun.com/

JS中使用jq方法实现二级菜单的切换和隐藏

weixin_42943920的博客

01-19

1652

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l.

js 下拉菜单的显示与隐藏

随风潜入夜，不白头

06-06

4869

脚本javascript为： <script type="text/javascript"> $(document).ready(function(){ $(".menu-li1 > a").click(function(){//点击菜单节点，展开菜单节点与隐藏菜单节点 $(this).next().toggle(500); }); $(".menu-a"...

JS方法实现下拉菜单显示和隐藏

XDarker的博客

05-24

5244

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...

JavaScript实现界面元素的展开隐藏效果

使用JavaScript实现展开效果，一般会涉及到以下几个步骤： 1. **获取元素**：使用`document.getElementById`或者`document.querySelector`等方法获取需要操作的HTML元素。 2. **绑定事件**：为触发器（本例中为按钮...