js点击子菜单折叠,再点击子菜单展开

最新推荐文章于 2021-10-30 22:02:45 发布
最新推荐文章于 2021-10-30 22:02:45 发布
阅读量3.3k 收藏
点赞数
分类专栏： javaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32914323/article/details/50722322
版权
<html>
    <head>
        <title>home_work_2</title>
        
        <script language="javascript">
            function f(str){
                var sub_menu = document.getElementById(str);
                var dis_v = sub_menu.style.display;
                
                if(dis_v == "none")
                    sub_menu.style.display = "block";
                else
                    sub_menu.style.display = "none";
                    
            }
        </script>
    </head>
    <body>
            <table cellspacing="0" cellpadding="0" border="1">
                <tbody>
                    <tr onclick = "f('sub_menu_1')">
                        <td>主菜单<人事统计></td>
                    </tr>
                    <tr>
                        <td>
                            <table id="sub_menu_1" >
                                <tbody>
                                    <tr><td>姓名</td><td>编号</td></tr>
                                    <tr><td>周星星</td><td>9527</td></tr>
                                    <tr><td>刘备</td><td>1000</td></tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                    
                    <tr onclick = "f('sub_menu_2')">
                        <td>主菜单<财务统计></td>
                    </tr>
                    <tr>
                        <td>
                            <table id="sub_menu_2" >
                                <tbody>
                                    <tr><td>成本</td><td>收益率</td></tr>
                                    <tr><td>运输</td><td>0.7</td></tr>
                                    <tr><td>材料</td><td>0.8</td></tr>
                                </tbody>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
    </body>
</html>
java开发小白
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
简单实现js点击展开二级菜单功能
12-09
虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下： 如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单。这里有两个点，实现展现和隐藏用display=”block”和display=”none”,另外就是要做一个判断，if   else的判断当前是block还是none。 <!DOCTYPE html>
最简单的纯js实现点击展开二级菜单功能
热门推荐
well2049的博客
05-16 2万+
虽然，jQuery已经非常好用了，但是实际的开发项目中，还是有很多限制，比如项目组奇葩的要求，不能使用任何插件，当然，也是考虑插件占用资源，毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求，当然只能用原生的JS去写来实现，我借鉴了网上的一个案例，补充一下，分享一下： 如果，默认打开页面进来时二级菜单是隐藏的，需要点击才能展现二级菜单，再点击就是隐藏二级菜单。这
js实现二级菜单点击显示当前内容效果
10-18
主要介绍了js实现二级菜单点击显示当前内容效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js实现进入二级页面后仍然选中菜单栏中的某个菜单（二级页面与菜单栏绑定）
会飞的象的博客
10-11 3305
  前言 我们通常在点击左侧菜单栏的某个菜单后，会进入一个页面，并将该菜单选中高亮显示； 但是往往在一个页面中，会链接到其他页面，通过第一个页面进入第二个页面后，怎么才能让该菜单仍然是选中且高亮显示的状态呢？ 用到的知识点 1.addclass("active")，给菜单的class添加active属性； 2.var _sitemap = new Array();，定义一个数组，存入当...
jquery实现可点击伸缩与展开的菜单效果代码
11-24
本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码。分享给大家供大家参考。具体如下： 这是一款jquery实现的点击伸缩与展开的菜单代码，操作方式大家都知道吧，点击一下展开二级菜单的内容，再次点击则合拢，很经典的折叠菜单。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/jquery-click-show-hidden-menu-style-codes/ 具体代码如下： &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org
js树形分类子菜单展开代码
06-24
为了视觉上呈现出展开和折叠的效果，需要使用CSS来改变子菜单的显示状态。例如，可以使用`display`属性来控制元素的可见性，`transition`属性实现平滑过渡效果。 5. **递归遍历** 如果树形结构深度较大，可以使用...
jQuery折叠展开树形菜单代码
06-24
- 使用`.click()`事件处理函数，当用户点击菜单项时，找到对应的子菜单元素，并调用`.toggle()`来改变其`display` CSS属性，实现展开或折叠。 4. **优化与扩展**： - **动画效果**：除了简单的切换，还可以添加...
js竖直收缩导航菜单，点击展开折叠菜单
06-04
本文将深入探讨如何使用JavaScript实现一个竖直收缩的导航菜单，点击时可展开或折叠子菜单项。这种交互式设计可以增强用户体验，尤其适用于内容丰富的网站。 首先，我们需要创建HTML结构。一个基本的垂直导航菜单...
Vue2(三)实现子菜单展开收缩，带动画效果实现方法
11-26
本文将详细介绍如何利用CSS3的过渡（transition）属性和max-height样式来实现一个优雅的展开与收缩子菜单的效果。这种方法不仅能够满足用户对美观和动态感的需求，而且实现起来相对简单。 首先，我们来看一下实现这...
js实现点击向下展开的下拉菜单效果代码
11-23
本文实例讲述了js实现点击向下展开的下拉菜单效果代码。分享给大家供大家参考。具体如下： 这里介绍js实现点击向下展开的下拉菜单特效代码，无调用jQuery，真正的JS下拉菜单，兼容性方面未做测试，觉得有用处的自己测试修正吧，本文仅提供基础的代码供参考。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
JS+CSS实现的简单折叠展开多级菜单效果
10-23
主要介绍了JS+CSS实现的简单折叠展开多级菜单效果,涉及JavaScript页面元素的遍历及动态操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
顶部点击展开层再次点击折叠(jquery)
12-10
顶部点击展开层再次点击折叠(jquery)
jqury 实现点击一个菜单，其他展开的子菜单隐藏
廖圣平
12-08 7861
jqury 实现点击一个菜单，另一个展开的子菜单隐藏
JS 实现点击展开菜单
weixin_34239169的博客
04-22 675
1： 获取事件源的两种方式 2： overflow 控制展现   &lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getScheme()+...
第一次写日历
青山一片云雾，心安即是归处
02-11 285
第一次写日历 实习期间，因为某个需求，要根据年月，弄出个日历，因为之前没写过，故在此记录 &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=dev
展开菜单栏
mengs
02-19 639
展开菜单栏 教程地址：原文地址（YouTube） B站教程：原文转载（bilibili） 两个视频的内容相同，第二个为转载 效果图 代码区 html <div class="menu-container"> <!-- 菜单栏 --> <div class="button"><p>Menu</p> <span ...
用javascript实现菜单子选项的隐藏和显示
ssisse的博客
04-19 5099
任务要求： 点击标题时判断该标题下的菜单是否显示，如果是显示的则将其隐藏，如果是隐藏的则将其显示出来。 Document *{margin:0; padding:0; font-size:13px; list-style:none;} .menu{width:210px; margin:50px auto
简单JavaScript菜单栏的扩展与隐藏
zuoxianshen的博客
10-30 1048
在这里插入代码片@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体验； 在创作中心设置你喜爱的代码高亮样式，Markdown 将代码片显示选择的高亮样式
展开折叠菜单
最新发布
05-24
折叠菜单是一种常见的网页设计元素，可以使页面更加美观、简洁和易于导航。通常情况下，折叠菜单会显示一组选项...这个示例中，当用户点击“更多选项”时，子菜单会展开显示子选项1和子选项2，再次点击则会折叠子菜单。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值