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

最新推荐文章于 2022-10-25 10:05:33 发布
最新推荐文章于 2022-10-25 10:05:33 发布
阅读量2k 收藏
点赞数
分类专栏： javascript 文章标签： javascript div list border table 文档
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/windrui/article/details/6516511
版权
Code:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
  2. <html xmlns="http://www.w3.org/1999/xhtml">    
  3. <head>    
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
  5. <title>无标题文档</title>    
  6. <style type="text/css">    
  7. table{    
  8.         border:#0066FF 1px solid;    
  9.         }    
  10. table td{    
  11.         border:#0000FF 1px solid;    
  12.         background-color:#00CCFF;    
  13.         }    
  14. table td div{    
  15.         background-color:#66FFCC;    
  16.         display:none;    
  17.         }    
  18. table td a:link,table td a:visited{    
  19.         text-decoration:none;    
  20.         color:#993300;    
  21.         }    
  22.             
  23. .open{    
  24.         display:block;    
  25.         }    
  26. .close{    
  27.         display:none;    
  28.         }    
  29. </style>    
  30. <script type="text/javascript">    
  31. function list2()    
  32. {    
  33.         var aNode = event.srcElement;    
  34.         var tdNode = aNode.parentNode;    
  35.         var divNode = tdNode.getElementsByTagName("div")[0];    
  36.         //alert(divNode.nodeName);    
  37.             
  38.         var tabNode = document.getElementsByTagName("table")[0];    
  39.             
  40.         var divNodes = tabNode.getElementsByTagName("div");    
  41.         for(var x=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>    
  60.   
  61. <body>    
  62.   
  63. <table>    
  64.         <tr>    
  65.             <td>    
  66.                 <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>    
  67.             <div>    
  68.                     撒旦防撒旦法    
  69.   
  70.                 撒旦防撒旦法    
  71.   
  72.                 撒旦防撒旦法    
  73.   
  74.                 撒旦防撒旦法    
  75.   
  76.                 撒旦防撒旦法    
  77.   
  78.             </div>    
  79.         </td>    
  80.     </tr>    
  81.     <tr>    
  82.             <td>    
  83.                 <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>    
  84.             <div>    
  85.                     撒旦防撒旦法    
  86.   
  87.                 撒旦防撒旦法    
  88.   
  89.                 撒旦防撒旦法    
  90.   
  91.                 撒旦防撒旦法    
  92.   
  93.                 撒旦防撒旦法    
  94.   
  95.             </div>    
  96.         </td>    
  97.     </tr>    
  98.         
  99.     <tr>    
  100.             <td>    
  101.                 <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>    
  102.             <div>    
  103.                     撒旦防撒旦法    
  104.   
  105.                 撒旦防撒旦法    
  106.   
  107.                 撒旦防撒旦法    
  108.   
  109.                 撒旦防撒旦法    
  110.   
  111.                 撒旦防撒旦法    
  112.   
  113.             </div>    
  114.         </td>    
  115.     </tr>    
  116.         
  117.     <tr>    
  118.             <td>    
  119.                 <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>    
  120.             <div>    
  121.                     撒旦防撒旦法    
  122.   
  123.                 撒旦防撒旦法    
  124.   
  125.                 撒旦防撒旦法    
  126.   
  127.                 撒旦防撒旦法    
  128.   
  129.                 撒旦防撒旦法    
  130.   
  131.             </div>    
  132.         </td>    
  133.     </tr>    
  134.     <tr>    
  135.             <td>    
  136.                 <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>    
  137.             <div>    
  138.                     撒旦防撒旦法    
  139.   
  140.                 撒旦防撒旦法    
  141.   
  142.                 撒旦防撒旦法    
  143.   
  144.                 撒旦防撒旦法    
  145.   
  146.                 撒旦防撒旦法    
  147.   
  148.             </div>    
  149.         </td>    
  150.     </tr>    
  151.     <tr>    
  152.             <td>    
  153.                 <a href="javascript:void(0)" onclick="list2()">好友菜单列表</a>    
  154.             <div>    
  155.                     撒旦防撒旦法    
  156.   
  157.                 撒旦防撒旦法    
  158.   
  159.                 撒旦防撒旦法    
  160.   
  161.                 撒旦防撒旦法    
  162.   
  163.                 撒旦防撒旦法    
  164.   
  165.             </div>    
  166.         </td>    
  167.     </tr>    
  168. </table>    
  169.   
  170. </body>    
  171. </html>    
  172.   

 

wind瑞
关注
专栏目录
js 下拉菜单的显示与隐藏
随风潜入夜，不白头
06-06 4793
脚本javascript为： &lt;script type="text/javascript"&gt; $(document).ready(function(){ $(".menu-li1 &gt; a").click(function(){//点击菜单节点，展开菜单节点与隐藏菜单节点 $(this).next().toggle(500); }); $(".menu-a"...
JS方法实现下拉菜单显示和隐藏
XDarker的博客
05-24 5197
<!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...
js实现多个列表展开收缩类似手风琴效果
xiaowang_test的博客
10-12 2740
实现效果大概是多个卡片默认均隐藏详情部分，点击展开可查看该卡片详情，点击收起详情隐藏；同时只展开一个，即某个展开时其他的均收缩状态。 设计思路： 详情模块与展开按钮各设置两个样式类，即默认样式类与展开样式类。每个卡片默认样式类display：none，展开按钮默认样式不设置旋转角度。点击展开按钮后，通过js语句定位到使用展开类名的元素的位置，利用arrt方法将样式类名换为默认样式类，用同样的方法更改展开按钮的样式；将当前卡片及展开按钮的样式该改为展开样式类（通过设置按钮元素css-transform的旋转
javascript实现多栏闭合展开式广告位菜单效果实例
10-23
总结来说，多栏闭合展开式广告位菜单效果的实现涉及了CSS样式的控制和JavaScript的事件处理。通过上述分析，我们可以了解到其工作原理，包括如何使用JavaScript函数来动态控制菜单项的展开与闭合，以及如何利用CSS...
jQuery实现默认是闭合的FAQ展开效果菜单
10-23
本文主要介绍了如何使用jQuery实现一个默认是闭合的FAQ（常见问题解答）展开效果菜单，这个效果使得用户点击问题时可以展开或折叠对应的答案。 知识点之一：jQuery选择器和DOM遍历 jQuery提供了一种使用CSS选择器的...
js实现可折叠展开的手风琴菜单效果
10-23
本文介绍的JavaScript技术实现的手风琴菜单效果，通过简单的样式变换，控制菜单项的展开和折叠，使得整个菜单既实用又美观。现在，我们将详细讨论实现该效果所需的相关知识点。 首先，需要理解手风琴菜单的基本工作...
五星展开菜单效果五星展开菜单效果五星展开菜单效果五星展开菜单效果
06-25
【五星展开菜单效果】是一种常见的UI设计元素，尤其在移动应用和网页设计中十分流行。这种效果通过模拟五角星的展开过程，为用户呈现一个动态、吸引人的交互菜单。在本文中，我们将深入探讨五星展开菜单的设计原理、...
实现列表展开收起效果
weixin_34218890的博客
05-17 998
$(".btn").click(function () {$(this).parents("当前元素最外层div的class").toggleClass("showDiv").siblings().removeClass("showDiv");});css：.最外层div class .需要收起展开的div的class{display: none;}.showDiv .需要收起展开的div的cla...
JavaScript-实例（实现展开效果）
LWT的专栏
11-07 947
DOM编程步骤： 1. 定义界面 通过html打开标签将数据进行封装 2.  定义一些静态的样式 通过CSS定义 3. 需要动态的完成和用户的交互 ①  明确事件源 ②  明确事件并将事件注册到事件源上 ③  通过javascript的函数对象事件进行处理 ④  在处理过程需要明确被处理的区域
js实现菜单的收缩与展开
lihongjiao的专栏
01-11 3664
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
Vue2(三)实现子菜单展开收缩，带动画效果
热门推荐
飞天代码的博客
01-01 3万+
以前做这种操作就是简单的display：block，但现在用户的要求也越来越高，需要美观和动画感。 现在介绍用一种简单的方式来实现子菜单从上向下展开子菜单。 看下效果图： 点开效果： 其实原理比较简单，就是通过子菜单的 max-height: 0;和 max-height: 2000px来实现子菜单的显示和关闭。加上css3的 transition: max-hei
html+css+js 简易展开收起效果
zhengxue_er
09-29 1万+
用html+css+js做一个简易的文本展开收起效果。如图： （部分结构标签可能不是最佳选择，此次仅以实现展开收起效果为例子） 以HBuilder编辑器选项卡中“查找”选项为例。设定“查找”为链接，点击链接实现标签的展开收起效果。1.html部分①.首先确定该选项的构成：一个显示标签和一组隐藏选项。html的整体结构框架为：<div id="showdiv"> <a i
JS实现列表的部分展开,收起及换一换功能
沪漂一族的博客
06-04 2153
&lt;div&gt; &lt;p class="classify"&gt;&lt;img src="${ctxStatic}/img/top.png" alt=""&gt;关键词 &lt;span&gt;Key word&lt;/span&gt;&lt;/p&gt; &lt;ul
javascript动态创建div循环列表
weixin_30653097的博客
11-16 1156
动态循环加载列表,实现vue中v-for的效果 效果图: 代码: var noApplicationRecord = document.getElementById('noApplicationRecord') //模拟数据 var data = [ { business: '万达影院(万胜广场店)', count: '325', num: '20170012565...
常见js效果——在表格中收起展开
gmz1992731的博客
07-12 4191
首先我先描述一下html代码，看一下各个元素之间的关系 table> 1 程序数据任意备份 有风险
JS-2级菜单的点击选中，展开闭合效果
最新发布
weixin_43935061的博客
10-25 934
js处理2级lnb菜单，js处理点击，js循环菜单
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值