使用js实现折叠菜单

最新推荐文章于 2024-11-05 15:26:40 发布
最新推荐文章于 2024-11-05 15:26:40 发布
阅读量110 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/helloczh/articles/1590669.html
版权

<!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=gb2312" />
<title>折叠菜单</title>
<script type="text/javascript">
function menu(obj,men)
{
 if(men.style.display=="")
 {
  men.style.display="none";
 }
 else
 {
  men.style.display="";
 }
}
</script>
</head>

<body>
<table >
<tr>
<td id="t1" οnclick="menu(this,Td9)"><span>新闻管理</span></td>
</tr>
<tr>
            <td id="Td9" class="sec_menu" style="display: none">
                <table width="150" border="0" align="center" cellpadding="0" cellspacing="0">
                    <tr>
                        <td height="20">
                            新闻列表 | 添加</td>
                    </tr>
                   
                    <tr>
                        <td height="20">
                            新闻首页_图片轮转
                        </td>
                    </tr>
                    <tr>
                        <td height="20">
                           新闻首页_热点新闻
                        </td>
                    </tr>
                    <tr>
                        <td height="20">
                           新闻首页_焦点
                        </td>
                    </tr>
                    <tr>
                        <td height="20">
                            新闻首页_展会
                        </td>
                    </tr>
                    <tr>
                        <td height="20">
                            新闻首页_图片新闻
                        </td>
                    </tr>
                </table>
            </td>
 </tr>
 <tr>
<td id="t2" οnclick="menu(this,t10)"><span>图片管理</span></td>
</tr>
 <tr>
  <td id="t10" style="display:none">
   <table>
   <tr>
    <td>添加图片</td>
   </tr>
   <tr>
    <td>修改图片</td>
   </tr>
   <tr>
    <td>删除图片</td>
   </tr>
  </table>
  </td>
 </tr>
  
</table>
</body>
</html>

转载于:https://www.cnblogs.com/helloczh/articles/1590669.html

weixin_30550271
关注
JS实现适合于后台使用的动画折叠菜单效果
10-23
主要介绍了JS实现适合于后台使用的动画折叠菜单效果,实例展示了两种折叠菜单显示效果,涉及JavaScript响应鼠标事件动态遍历及改变页面元素样式的实现技巧,需要的朋友可以参考下
JS实现三级折叠菜单特效，其它级可自动收缩
01-21
本文实例讲述了JS实现三级折叠菜单特效，其它级可自动收缩。分享给大家供大家参考，很实用,在IE6、IE7、IE8、FF、chrome等浏览器都正常运行具体如下： 小贴士：去掉CSS中 #menu ul中 ｛height:100px; overflow:auto;...
java展开式的菜单_js实现简单折叠、展开菜单的方法
weixin_39834678的博客
03-01 274
本文实例讲述了js实现简单折叠、展开菜单的方法。分享给大家供大家参考。具体如下：这里介绍的是意乱会折叠、展开的菜单导航栏，很老时候写的，CSS没有做美化，如果想用的朋友就自己美化吧。运行效果截图如下：在线演示地址如下：具体代码如下：function show(c_Str){if(document.all(c_Str).style.display=='none'){document.all(c_St...
JS 实现折叠式菜单
JAVAZHICHIZHE的专栏
06-19 1982
js 实现菜单折叠功能
Corn的博客
03-27 1936
js 实现菜单折叠功能 菜单展开效果： 菜单折叠效果： 源代码
JS实现简单的下拉的折叠菜单
xd201705551232的博客
03-16 5551
JS实现简单的下拉的折叠菜单 代码来源（转自）：https://blog.csdn.net/qq_37241934/article/details/82933466 main.html &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&a
js基础【折叠菜单】
姗姗的博客
07-08 3291
<!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-UA-Compa...
使用jQuery实现折叠菜单效果
沐小侠
03-28 1183
使用HTML+CSS+JS实现简单的折叠菜单效果
JS实现移动端可折叠导航菜单（现代都市风）
10-15
以下是使用jQuery实现可折叠菜单的基本步骤： 1. **事件监听**：我们需要监听用户的行为，通常是点击汉堡图标或已展开的菜单。这可以通过`.click()`方法实现，绑定到对应的元素上。 2. **状态管理**：定义一个变量...
JS实现的竖向折叠菜单代码
10-23
首先，HTML部分构建了整个竖向折叠菜单的结构。通过使用`div`元素，我们创建了一个导航栏`nav`，在这个导航栏中定义了多个标题和内容块。每个标题都是一个`div`元素，并且拥有一个唯一的`id`，以及一个`onclick`事件...
JS三级可折叠菜单实现方法
10-22
在给出的文件内容中，提到了使用***结合JavaScript来实现三级可折叠菜单的具体技巧，这通常涉及到对DOM的节点操作，包括创建、读取、更新和删除元素节点，以及对CSS样式的控制。下面将对这些知识点进行详细解释。 1...
7句js代码实现网页 折叠菜单
热门推荐
潘敬
05-08 1万+
最近经常用到javascript，做了很多网页效果，其中有个折叠菜单。 网上的代码 一大堆，麻烦，而且看不懂，我就搞不懂了，写那么多代码干嘛~~~~ 所以自己写了个。 主要用到了 jquery和ul和li 定义菜单的格式是这样的： 我的信息 个人资料 收货地址
原生js实现折叠菜单组件开发
蒲公英芽的博客
01-28 1222
纯js实现折叠菜单组件开发。 功能需求： 1. 根据数据内容创建折叠菜单内容，显示在页面中； 2. 点击一级菜单，如果点击的一级菜单下有对应的子菜单，则让其展开；如果没有子菜单，则不能点击； 3. 要考虑到三级菜单、四级菜单....的显示； 因为不确定一共有几级菜单，考虑到多级菜单出现的情况，可以使用递归回调函数；数据结构一定要统一，方便对数据进行操作。
js实现的折叠式菜单
wangyining070205的博客
06-11 4609
用js实现的折叠式菜单
vue3中使用vue-diff工具来比较数据差异
kanno的博客
11-04 275
vue3中使用vue-diff工具来比较数据差异，可以比较json、文本、css、js等数据格式，通过颜色来标识差异的地方
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 434
关于react hooks的一些知识与应用
JavaScript 生成二维码
qq_30049249的博客
11-02 236
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
软件测试学习笔记丨Vue常用指令-条件渲染（v-if）
最新发布
ceshiren_com的博客
11-05 487
v-show只是简单控制dom元素的display属性。v-if通过操纵dom元素来进行切换显示。
vxe-grid ，增加新行，并且定位到新增的行
花花鱼的专栏
11-05 169
vxe-grid新增空行，并且定位到空行位置。
使用jQuery实现的折叠菜单
在这个示例中，我们看到一个使用jQuery库来创建交互式折叠菜单的HTML和JavaScript代码。这个菜单结构是一个`<dl>`元素，其中包含多个`<dt>`（定义术语）和`<dd>`（定义描述）对，分别代表菜单的标题和内容部分。菜单...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值