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

最新推荐文章于 2022-03-16 13:43:45 发布
最新推荐文章于 2022-03-16 13:43:45 发布
阅读量224 收藏
点赞数
文章标签： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
实用js+css多级树形展开效果导航菜单
06-15
js+css制作折叠展开的多级树形导航菜单，带多选框效果，经典实用。已经用在程序里了。资源来自：http://www.zzjs.net/html/2105.html
列表代码我的第一个封装js代码-----展开收起效果
weixin_33721427的博客
05-28 88
上班之余抽点时间出来写写博文，希望对新接触的朋友有帮助。今天在这里和大家一起学习一下列表代码     第一次靠自己完整的封装的小殊效，有点小小的高兴，和大家分享下，希望能对和我一样在探索的童鞋们有点帮助     js部份：     var show_obj = function(obj,at,ob){ $(obj).bind('click', function(){ var showTxt ...
jQuery 左侧菜单 展开、闭合 &三元运算
weixin_30593443的博客
07-31 114
点击展开，再点闭合 <!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实现多栏闭合展开式广告位菜单效果,可实现类似手风琴切换展示效果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
JavaScript案例-js二级联动菜单
02-16
JavaScript案例-js二级联动菜单
javascript经典特效---内部菜单展开效果.rar
12-31
内部菜单展开效果.rar内部菜单展开效果.rar内部菜单展开效果.rar内部菜单展开效果.rar内部菜单展开效果.rar内部菜单展开效果.rar
Javascript通过overflow控制列表闭合与展开的方法
10-24
DisplayList()">球星列表5</dt> 罗纳尔多</dd> 贝克汉姆</dd> 齐达内</dd> 内马尔</dd> 巴蒂斯图塔</dd> 梅西</dd></dl></div></body>上述代码展示了一个使用JavaScript和CSS通过`overflow`属性控制列表闭合与展开的...
web前端开发之二级菜单的隐藏和展开
编程的取经之路
05-21 5162
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 3641
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
js实现侧边导航栏展开和折叠
热门推荐
遇见更好的自己
06-09 3万+
效果：左侧导航栏，点击展开，显示子菜单。再次点击，菜单折叠。 代码：<!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">
JS-案例-三级菜单（可展开、合并）
Joker.M的博客
06-04 3550
运用递归写ul>li三级菜单的结构，构建点击事件，触发合并，展开的效果 第一种方法 侦听所有li，为防止li向上冒泡影响ul，要加e.stopPropagation( );阻止冒泡 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit...
常见js效果——在表格中收起展开
gmz1992731的博客
07-12 4158
首先我先描述一下html代码，看一下各个元素之间的关系 table> 1 程序数据任意备份 有风险
jquery实现：列表展开与收缩
皮蛋瘦肉没有肉
08-07 8596
话不多说，大家请看代码 先看html代码，以照相机为例子： （别忘了引入jquery文件） 佳能(30440) 尼康(30440) 三星(30440) 索尼(30440) 松下(30440)
web 端展现报表数据时如何实现折叠展开效果？
rqgxy的博客
05-26 908
1、 如果有报表工具，且报表工具内置了折叠属性设置，那么可以直接通过简单配置实现表格数据的折叠展开效果，具体操作配置可以参考 如何实现伸缩 (折叠) 报表？ 这种实现方式对开发人员技术要求比较低，操作方式也简单；web 端折叠打开的操作不需要刷新计算，性能相对比较高。 2、 如果报表工具没有折叠功能，那么可以通过 jQuery 的 show()、hide() 方法对报表进行 tr 的显示、隐藏操作。 这种实现方式需要开发人员学习 jQuery，对 js 的要求比较高，初次展现大数据量时会相对慢些。 .
javascript实现列表的点击展开折叠
weixin_30707875的博客
08-03 1572
1 <script> 2 window.onload = function() 3 { 4 //要折叠的区域 5 var catalog = document.getElementById("div-id"); 6 //如果全部列表都添加折叠使用document.getElementsByTagName("ul"); 7 ...
实现列表展开收起效果
weixin_34218890的博客
05-17 985
$(".btn").click(function () {$(this).parents("当前元素最外层div的class").toggleClass("showDiv").siblings().removeClass("showDiv");});css：.最外层div class .需要收起展开的div的class{display: none;}.showDiv .需要收起展开的div的cla...
用uni-app实现点击悬浮按钮展开悬浮菜单
最新发布
06-08
好的，为您提供uni-app实现点击悬浮按钮展开悬浮菜单的步骤： 1. 在页面中添加一个悬浮按钮，如下： ```html <view class="float-btn" @tap="showMenu">+</view> ``` 2. 在data中添加一个变量，用来控制悬浮菜单的显示和隐藏，如下： ```javascript data() { return { isShowMenu: false, menuList: [ { text: '菜单1', icon: 'home', onClick() { // 处理菜单1的点击事件 } }, { text: '菜单2', icon: 'search', onClick() { // 处理菜单2的点击事件 } }, { text: '菜单3', icon: 'settings', onClick() { // 处理菜单3的点击事件 } } ] } } ``` 其中，menuList是悬浮菜单中的菜单列表，每个菜单都包括文本、图标和点击事件。 3. 在methods中添加一个方法，用来控制悬浮菜单的显示和隐藏，如下： ```javascript methods: { showMenu() { this.isShowMenu = !this.isShowMenu; }, handleMenuClick(index) { const menu = this.menuList[index]; if (menu.onClick) { menu.onClick(); } this.isShowMenu = false; } } ``` 其中，showMenu方法用于控制isShowMenu的值，从而显示或隐藏悬浮菜单；handleMenuClick方法用于处理悬浮菜单中的菜单被点击的事件。 4. 在template中添加悬浮菜单的代码，如下： ```html <view class="float-menu" v-show="isShowMenu"> <view class="menu-item" v-for="(menu, index) in menuList" :key="index" @tap="handleMenuClick(index)"> <view class="menu-icon"> <uni-icons :type="menu.icon"></uni-icons> </view> <view class="menu-text">{{ menu.text }}</view> </view> </view> ``` 其中，float-menu是悬浮菜单的容器，menu-item是悬浮菜单中的每个菜单项，menu-icon是菜单项的图标，menu-text是菜单项的文本。 5. 在CSS中设置悬浮按钮和悬浮菜单的样式，如下： ```css .float-btn { position: fixed; right: 20px; bottom: 20px; width: 60px; height: 60px; line-height: 60px; text-align: center; font-size: 30px; border-radius: 50%; background-color: #007AFF; color: #fff; z-index: 9999; } .float-menu { position: fixed; right: 20px; bottom: 90px; width: 150px; height: 150px; border-radius: 10px; background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); z-index: 9998; display: flex; flex-wrap: wrap; justify-content: space-between; align-content: space-between; padding: 10px; opacity: 0.95; transition: all 0.3s; } .menu-item { width: 40%; height: 40%; display: flex; flex-direction: column; justify-content: center; align-items: center; font-size: 12px; color: #333; } .menu-icon { font-size: 20px; color: #007AFF; } .menu-text { margin-top: 5px; } ``` 这样就可以实现用uni-app点击悬浮按钮展开悬浮菜单的效果了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值