文档章节

前端树状菜单

喜欢敲代码的感觉
 喜欢敲代码的感觉
发布于 2014/10/27 20:54
字数 376
阅读 300
收藏 0

因为突然间用到这个东西,但是也不清楚别人是怎么做的,就自己根据自己的想法来了,效果还不错、

先思路,后代码:

    思路:两个ul嵌套,把外层的ul显示出来,里层的ul先用样式表隐藏,当点击的时候,当前li下的ul状态更改为显示,就可以了

              当点击其他的时候,先把外层li下所有的ul样式全为隐藏,然后再显示当前下的ul,大体思路就是这样

    代码:

<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
    <style type="text/css">
        li{list-style-type: none; float: left;}
        .u{width: 120px;}
        .u .tre{font-size: 18px; line-height: 22px;}
        .u .tre .l{width: 120px; height: 20px;}
        .u .tre .sub{display: none; width: 70px;}
        .u .tre .sub li{font-size: 14px; line-height: 18px; float: left;}
    </style>

</head>
<body>
    <ul>
        <li>
            <div>
            <a href="#">青龙</a>
            </div>
            <ul>
                <li>小青龙</li>
                <li>小青龙</li>
            </ul>
        </li>
        <li>
            <div>
            <span>白虎</span>
            </div>
            <ul>
                <li>小白虎</li>
                <li>小白虎</li>
            </ul>
        </li>
        
        <li>
            <div>
            <span>朱雀</span>
            </div>
            <ul>
                <li>小朱雀</li>
                <li>小朱雀</li>
            </ul>
        </li>
        <li>
            <div>
            <span>玄武</span>
            </div>
            <ul>
                <li>小玄武</li>
                <li>小玄武</li>
            </ul>
        </li>
    </ul>


    <script type="text/javascript">
        $(".l").click(function(){
            $(".sub").hide();
            $(this).parent().find(".sub").show();
        });
    </script>
</body>
</html>

具体样式什么的,自己去调,这个是竖着的,横着的,和这个类似,定一下位应该就成

今天状态不佳,又犯了个错,  Js代码放在head中, 就说没反应, 真是醉了。。。

© 著作权归作者所有

喜欢敲代码的感觉
粉丝 1
博文 41
码字总数 8149
作品 0
西安
程序员
私信 提问
JS树状菜单和表格控件--Tabletree4j

TableTree4J 是一个开源的基于javascript的树状菜单和表格控件,实用TableTree4J可以轻易实现带树状折叠效果的表格和树状折叠菜单。 目前TableTree4J版本为1.1Re版,支持以下功能: 1.多种模...

匿名
2011/09/22
5.7K
0
求教 有没有什么基于WEB的3d引擎

现有一个3d模型,可以是3dmax导出的任意格式的模型包, 浏览器通过某种技术加载这个3d模型包并显示,同时支持点击, 浏览器页面左侧可以是树状菜单显示点击的节点,右侧显示3d模型,3d模型也...

xhu_cf
2014/06/01
909
2
KnifeCMS.ASP Beta1.1.0版发布

What's New 1.增加了采集系统; 2.将原先的“内容管理”分为“内容管理”与“分类管理”; 3.发布文章时自动静态化与文章相关的内容; 4.将系统默认编码由GB2312改为UTF-8. Bug Fix 1.修正采...

邵可佳
2012/01/28
413
0
树状图节点菜单

为什么我用树状图写了一个数据库管理的桌面软件,树状图节点那里加不上右键菜单呢?谁加上了?求解!!!

郏高阳
2011/10/22
317
0
树状菜单结构怎么设计才容易检索?

树状菜单结构怎么设计才容易检索? 就是 菜单的编号按照什么样的规则进行组合,才容易在后期方便 查询所有的某类型的菜单,而减少递归次数 等等。 比如 一级菜单为 1位,2级2位,等等,可以可...

wad12302
2013/02/22
750
2

没有更多内容

加载失败,请刷新页面

加载更多

Phpstorm2018 永久激活

1、安装phpstorm,安装包请自行官网下载 http://www.jetbrains.com/phpstorm/download/ 2、下载JetbrainsCrack.jar文件,存放至你的phpstorm执行文件同级目录下 下载JetbrainsCrack.jar 提取...

happyfish319
8分钟前
2
0
谈一谈Android进程间通信的几种方式

###来看一下Android中除了AIDL还有哪些进程间通信的方式: 1、Bundle Bundle实现了Parcelable,所以在Android中我们可以通过Intent在不同进程间传递Bundle数据。 但是在Intent 传输数据的过程...

二营长的意大利炮手
9分钟前
4
0
互联网薪资“高开低走”,你的能力是否真的可以匹配高薪?

对于国内外主流互联网大厂,技术出身似乎已经成为各大掌门人的必备标签。谷歌 CEO 桑达尔·皮查伊、马克·扎克伯格、李彦宏、马化腾、雷军等等皆为技术人出身,都曾参与了公司内部重要产品的...

Java技术剑
10分钟前
2
0
java 多线程

线程声明周期 线程的五个状态:新建,就绪,运行,阻塞,死亡。 其中就绪和运行两个状态客户互相转换,但运行到阻塞,阻塞到就绪,只能单向转换。 刚new出的线程就是【新建】状态,调用start...

雷开你的门
12分钟前
4
0
构造器Constructor是否可被overrid

构造器不能被重写,不能用static修饰构造器,只能用public private protected这三个权限修饰符,且不能有返回语句。

无名氏的程序员
16分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部