Javascript应用--实现菜单列表展开闭合效果

最新推荐文章于 2022-03-16 13:43:45 发布
最新推荐文章于 2022-03-16 13:43:45 发布
阅读量236 收藏
点赞数
文章标签： javascript xhtml ViewUI
Code:
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>无标题文档</title>
  6. <styletype="text/css">
  7. table{
  8. border:#0066FF1pxsolid;
  9. }
  10. tabletd{
  11. border:#0000FF1pxsolid;
  12. background-color:#00CCFF;
  13. }
  14. tabletddiv{
  15. background-color:#66FFCC;
  16. display:none;
  17. }
  18. tabletda:link,tabletda:visited{
  19. text-decoration:none;
  20. color:#993300;
  21. }
  23. .open{
  24. display:block;
  25. }
  26. .close{
  27. display:none;
  28. }
  29. </style>
  30. <scripttype="text/javascript">
  31. functionlist2()
  32. {
  33. varaNode=event.srcElement;
  34. vartdNode=aNode.parentNode;
  35. vardivNode=tdNode.getElementsByTagName("div")[0];
  36. //alert(divNode.nodeName);
  38. vartabNode=document.getElementsByTagName("table")[0];
  40. vardivNodes=tabNode.getElementsByTagName("div");
  41. for(varx=0;x<divNodes.length;x++)
  42. {
  43. if(divNodes[x]==divNode)
  44. {
  45. if(divNode.className=="open")
  46. {
  47. divNode.className="close";
  48. }
  49. else
  50. {
  51. divNode.className="open";
  52. }
  53. }
  54. else
  55. divNodes[x].className="close";
  56. }
  57. }
  58. </script>
  59. </head>
  61. <body>
  63. <table>
  64. <tr>
  65. <td>
  66. <ahref="javascript:void(0)"onclick="list2()">好友菜单列表</a>
  67. <div>
  68. 撒旦防撒旦法
  70. 撒旦防撒旦法
  72. 撒旦防撒旦法
  74. 撒旦防撒旦法
  76. 撒旦防撒旦法
  78. </div>
  79. </td>
  80. </tr>
  81. <tr>
  82. <td>
  83. <ahref="javascript:void(0)"onclick="list2()">好友菜单列表</a>
  84. <div>
  85. 撒旦防撒旦法
  87. 撒旦防撒旦法
  89. 撒旦防撒旦法
  91. 撒旦防撒旦法
  93. 撒旦防撒旦法
  95. </div>
  96. </td>
  97. </tr>
  99. <tr>
  100. <td>
  101. <ahref="javascript:void(0)"onclick="list2()">好友菜单列表</a>
  102. <div>
  103. 撒旦防撒旦法
  105. 撒旦防撒旦法
  107. 撒旦防撒旦法
  109. 撒旦防撒旦法
  111. 撒旦防撒旦法
  113. </div>
  114. </td>
  115. </tr>
  117. <tr>
  118. <td>
  119. <ahref="javascript:void(0)"onclick="list2()">好友菜单列表</a>
  120. <div>
  121. 撒旦防撒旦法
  123. 撒旦防撒旦法
  125. 撒旦防撒旦法
  127. 撒旦防撒旦法
  129. 撒旦防撒旦法
  131. </div>
  132. </td>
  133. </tr>
  134. <tr>
  135. <td>
  136. <ahref="javascript:void(0)"onclick="list2()">好友菜单列表</a>
  137. <div>
  138. 撒旦防撒旦法
  140. 撒旦防撒旦法
  142. 撒旦防撒旦法
  144. 撒旦防撒旦法
  146. 撒旦防撒旦法
  148. </div>
  149. </td>
  150. </tr>
  151. <tr>
  152. <td>
  153. <ahref="javascript:void(0)"onclick="list2()">好友菜单列表</a>
  154. <div>
  155. 撒旦防撒旦法
  157. 撒旦防撒旦法
  159. 撒旦防撒旦法
  161. 撒旦防撒旦法
  163. 撒旦防撒旦法
  165. </div>
  166. </td>
  167. </tr>
  168. </table>
  170. </body>
  171. </html>

iteye_6481
关注
JS-2级菜单的点击选中，展开闭合效果
weixin_43935061的博客
10-25 945
js处理2级lnb菜单，js处理点击，js循环菜单
常见js效果——在表格中收起展开
gmz1992731的博客
07-12 4194
首先我先描述一下html代码，看一下各个元素之间的关系 table> 1 程序数据任意备份 有风险
实用js+css多级树形展开效果导航菜单
06-15
js+css制作折叠展开的多级树形导航菜单，带多选框效果，经典实用。已经用在程序里了。资源来自：http://www.zzjs.net/html/2105.html
列表代码我的第一个封装js代码-----展开收起效果
weixin_33721427的博客
05-28 97
上班之余抽点时间出来写写博文，希望对新接触的朋友有帮助。今天在这里和大家一起学习一下列表代码     第一次靠自己完整的封装的小殊效，有点小小的高兴，和大家分享下，希望能对和我一样在探索的童鞋们有点帮助     js部份：     var show_obj = function(obj,at,ob){ $(obj).bind('click', function(){ var showTxt ...
jQuery 左侧菜单 展开、闭合 &三元运算
weixin_30593443的博客
07-31 135
点击展开，再点闭合 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .header{ ...
WEB HTML 二级菜单 折叠展开菜单
小西瓜吖的博客
03-16 1万+
WEB，HTML，二级菜单，折叠展开 一、效果图： 二、完整代码： 直接复制 浏览器打开即可。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>菜单</title> <!-- JS --> <script language="javascript"&g
javascript实现多栏闭合展开式广告位菜单效果实例
10-23
主要介绍了javascript实现多栏闭合展开式广告位菜单效果,可实现类似手风琴切换展示效果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery实现默认是闭合的FAQ展开效果菜单
10-23
本文主要介绍了如何使用jQuery实现一个默认是闭合的FAQ（常见问题解答）展开效果菜单，这个效果使得用户点击问题时可以展开或折叠对应的答案。 知识点之一：jQuery选择器和DOM遍历 jQuery提供了一种使用CSS选择器的...
js实现可折叠展开的手风琴菜单效果
10-23
本文介绍的JavaScript技术实现的手风琴菜单效果，通过简单的样式变换，控制菜单项的展开和折叠，使得整个菜单既实用又美观。现在，我们将详细讨论实现该效果所需的相关知识点。 首先，需要理解手风琴菜单的基本工作...
五星展开菜单效果五星展开菜单效果五星展开菜单效果五星展开菜单效果
06-25
【五星展开菜单效果】是一种常见的UI设计元素，尤其在移动应用和网页设计中十分流行。这种效果通过模拟五角星的展开过程，为用户呈现一个动态、吸引人的交互菜单。在本文中，我们将深入探讨五星展开菜单的设计原理、...
web前端开发之二级菜单的隐藏和展开
编程的取经之路
05-21 5216
caidan #navigation{ width: 200px; height: 1000px; float: left; } #navigation>ul{ list-style-type: none; margin: 0px; padding: 0px; } #navigation>ul>li{ border-bottom
js实现菜单的收缩与展开
lihongjiao的专栏
01-11 3670
tab.js中的菜单收缩与展开函数function showx(type_) { var flag=document.getElementById('div_menu_'+(type_+1)).style.display; for(var j=0;j<3;j++) { document.getElementById('div_menu_1').st
JavaScript二级菜单
zhangqling的博客
09-23 1966
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;二级菜单&lt;/title&gt; &lt;style&gt; *{ margin:0; padding: 0; } .hea
web 端展现报表数据时如何实现折叠展开效果？
rqgxy的博客
05-26 954
1、 如果有报表工具，且报表工具内置了折叠属性设置，那么可以直接通过简单配置实现表格数据的折叠展开效果，具体操作配置可以参考 如何实现伸缩 (折叠) 报表？ 这种实现方式对开发人员技术要求比较低，操作方式也简单；web 端折叠打开的操作不需要刷新计算，性能相对比较高。 2、 如果报表工具没有折叠功能，那么可以通过 jQuery 的 show()、hide() 方法对报表进行 tr 的显示、隐藏操作。 这种实现方式需要开发人员学习 jQuery，对 js 的要求比较高，初次展现大数据量时会相对慢些。 .
javascript实现列表的点击展开折叠
weixin_30707875的博客
08-03 1612
1 <script> 2 window.onload = function() 3 { 4 //要折叠的区域 5 var catalog = document.getElementById("div-id"); 6 //如果全部列表都添加折叠使用document.getElementsByTagName("ul"); 7 ...
js展开菜单效果（一）
TimeToBeWinner
09-11 987
前言： 废话不多说了，内容很简单。一个是点击展开效果，一个是展示广告然后定时关闭效果。后续写一个JD的二级菜单展示。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://
纯CSS实现展开列表
YooHoeh的博客
05-26 6037
效果预览 以下为源码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Insert title here&lt;/title&gt; &lt;/head&gt; &lt;style&gt; *{ padding:0;
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值