js实现的折叠导航

最新推荐文章于 2020-03-27 15:47:15 发布
最新推荐文章于 2020-03-27 15:47:15 发布
阅读量903 收藏
点赞数
分类专栏： js 文章标签： js实现的折叠导航
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/asdfzjs/article/details/16457997
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <meta http-equiv=content-type content="text/html; charset=utf-8" />
        <link href="css/admin.css" type="text/css" rel="stylesheet" />
        <script language=javascript>
            function expand(el)//传递的是id，1,2,3用来区分所属的分类
            {
                childobj = document.getElementById("child" + el);//child1,child2.....

                if (childobj.style.display == 'none')//如果此元素师none，就不会被显示
                {
                    childobj.style.display = 'block';//如果是block。就会显示为块级元素
                }
                else
                {
                    childobj.style.display = 'none';//当再次点击时，那么就会又隐藏起来
                }
                return;
            }
        </script>
    </head>
    <body>
        <table height="100%" cellspacing=0 cellpadding=0 width=170 
               background=./img/menu_bg.jpg border=0>
               <tr>
                <td valign=top align=middle>
                    <table cellspacing=0 cellpadding=0 width="100%" border=0>
                        <tr>
                            <td height=10></td>
                        </tr>
                    </table>
                    
                    <table cellspacing=0 cellpadding=0 width=150 border=0>
                        <tr height=22>
                            <td style="padding-left: 30px" background=./img/menu_bt.jpg>
                            <a class=menuparent οnclick=expand(1)  href="javascript:void(0);">人员管理</a></td></tr>
                        <tr height=4>
                            <td></td></tr></table>
                    <table id=child1 style="display: none" cellspacing=0 cellpadding=0 
                           width=150 border=0>
                        <tr height=20>
                            <td align=middle width=30><img height=9 
                                                           src="./img/menu_icon.gif" width=9></td>
                            <td><a class=menuchild 
                                   href="memberadd.jsp" 
                                   target=right>人员增加</a></td></tr>
                        <tr height=20>
                            <td align=middle width=30><img height=9 
                                                           src="./img/menu_icon.gif" width=9></td>
                            <td><a class=menuchild 
                                   href="#" 
                                   target=right>人员修改</a></td></tr>
                        <tr height=20>
                            <td align=middle width=30><img height=9 
                                                           src="./img/menu_icon.gif" width=9></td>
                            <td><a class=menuchild 
                                   href="#" 
                                   target=right>人员删除</a></td></tr>
                        <tr height=20>
                            <td align=middle width=30><img height=9 
                                                           src="./img/menu_icon.gif" width=9></td>
                            <td><a class=menuchild 
                                   href="#" 
                                   target=right>人员查找</a></td></tr>
                        <tr height=4>
                            <td colspan=2></td>
                        </tr>
                        </table>
                            
                            
                    
                            
                    
    </body>
</html>

飞鸟zjs
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript直接实现响应式可折叠导航栏
肥宅Davina的博客
01-30 1932
JavaScript直接实现响应式可折叠导航栏，完全不用Bootstrap框架和jQuery库。
js 实现 div的折叠效果
03-31
js 实现 div的折叠效果! 值得下载看看!资源免费,大家分享!!
js实现的折叠导航示例
weixin_34311757的博客
11-29 309
2019独角兽企业重金招聘Python工程师标准>>> ...
js折叠效果
wanglei_smartfish的专栏
12-29 1974
民间机构提前3天预报大理地震 地震局称违法 17日大理州5.0级地震发生之后 ，在微博上一条曾在3天前就预测大理将发生5.0级地震的微博受到了很多网友的关注。 记者联系上了微 博博主，该博主表示，他是通过分析云南省地震局官方网站的数据得出的预报信息。对此，省地震局回应表示， 地震局欢迎民间机构与地震局进行一些学术上的探讨和交流，但民间机构对外公开发布地震预报信息是违法的。
js 实现菜单折叠功能
Corn的博客
03-27 1913
js 实现菜单折叠功能 菜单展开效果： 菜单折叠效果： 源代码
JS实现移动端可折叠导航菜单（现代都市风）
10-15
例如，一个简单的JavaScript实现可以如下所示： ```javascript $(document).ready(function() { var $menu = $('.menu'); var $burger = $('.burger'); $burger.click(function(event) { event.preventDefault...
支持响应式手机端的JS手风琴折叠导航菜单特效
01-02
"支持响应式手机端的JS手风琴折叠导航菜单特效"是一个专为手机网站设计的导航菜单，利用JavaScript（可能结合jQuery库）和CSS技术，实现了一种优雅的交互效果。 首先，手风琴特效是一种常见的UI设计元素，它允许...
一个不错的div树状导航栏
weixin_30455365的博客
07-29 183
<style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { width:180px; line-height: 24px; list-style-type:...
CSS+JS实现一个DIV层的展开折叠效果
09-01
CSS+JS实现一个DIV层的展开折叠效果,自己总结出来的，两天才解决的问题，分享出来，大家项目学习，交流。欢迎评论、指导
js实现超简单的展开、折叠目录代码
11-21
本文实例讲述了js实现超简单的展开、折叠目录代码。分享给大家供大家参考。具体如下： 这里介绍一款超简单的目录，展开菜单代码，鼠标点击即可展开，再次点击即可合拢，类似树形菜单的功能，网上见过很多，不多做介绍了，欢迎参考。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-show-hidden-list-menu-codes/ 具体代码如下： <title>可折叠展开的简单目录</title> <style> div{ font-size:12px; color:red; background-color: #EAEAE8; border
js折叠工具
04-08
js折叠工具，简单易用。
JS折叠插件
12-22
VS的插件 装上后js可折叠 开发是使页面变得更清晰
js折叠插件
01-22
vs2010的扩展插件，让js、css文件的方法折叠起来，不错哦。。网上也可以找到。
js实现菜单折叠导航
weixin_30500663的博客
07-22 162
<style type="text/css"> <!-- *{margin:0;padding:0;border:0;} body { font-family: arial, 宋体, serif; font-size:12px; } #nav { width:180px; line-height: 24px; list-style-type:...
js实现折叠面板
热门推荐
NicoleChan的博客
12-11 1万+
文章目录最终效果具体操作思路htmljs 最终效果 具体操作 思路 1、点击每一个面板，触发对应的下方内容展开折叠，不能影响其它面板； 2、箭头的方向也要发生相应的改变 html 给默认的箭头一个点击触发的事件 js listCardsHandle(e){ //根据当前点击的块，获取需要展示隐藏的块 var listCardsBlock = e.currentTarge...
折叠式导航菜单
04-01
折叠式导航
折叠导航菜单
牧童
07-23 245
[code="html"] Recipes Starters Main Courses Desserts Contact Us Starters Main Courses Desserts Articles Buy Online some other content ...
右折叠导航栏实现代码
最新发布
06-01
以下是一个简单的右折叠导航栏实现代码的示例： HTML ``` <a href="#">Home <a href="#">About <a href="#">Contact <a href="javascript:void(0);" class="icon" onclick="myFunction()"> ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值