【亚洲必赢官网】一个css与js结合的下拉菜单协助主流浏览器，jQuery多级手风琴菜单完结代码

发表于 由admin

前端重构方案精晓一下

2018/06/09 · 基础技术 ·
重构

初稿出处：
吃葡萄不吐番茄皮   

一个css与js结合的下拉菜单协理主流浏览器

 首先申明：

我固然在web前端岗位干了无数年，但左顾右盼岗位对技术需要不高。html,css用的可比多，JavaScript自己原创的很少，基本都是copy修改，所以自己真的出手写时，发现基础很不牢固，边上学边实践，收获很大。

效果图：

亚洲必赢官网 1

不赘述了，贴码了

1、css代码

 

代码如下:

a:link{color:white;text-decoration:none;}
a:visited{color:white;text-decorative:none;}
a:hover{color:white;text-decorative:none;}
a:active{color:white;text-decorative:none;}
li{float:left;display:inline;background-color:#003366;width:120px;text-align:center;margin:2px;padding:10px
0 5px 0;position:relative;}
.limouseover{background-color:#0033ff;color:red;}
.limouseout{background-color:#003366;color:black;}
li ul{display:none;width:120px;position:absolute;left:0;top:30px;}
li ul li{margin:0px auto;border-top:1px solid #006699;}

 

2、JavaScript代码

代码如下:

<script language=javascript>
function menu(menu1){
//鼠标移入移出classname切换和子菜单隐藏、突显切换。
if (document.getElementById(menu1)){
var menu_ul=document.getElementById(menu1);
if (menu_ul.getElementsByTagName(“li”).length){
var menu_li=menu_ul.getElementsByTagName(“li”);
for (i in menu_li){
menu_li[i].onmouseover=function(){this.className=”limouseover”;if
(this.getElementsByTagName(“ul”).length){this.getElementsByTagName(“ul”)[0].style.display=”block”;}}
menu_li[i].onmouseout=function(){this.className=”limouseout”;if
(this.getElementsByTagName(“ul”).length){this.getElementsByTagName(“ul”)[0].style.display=”none”;}}
}
}
}
}

</script>

 

3、html代码

 

代码如下:

<ul id=menu1>
<li><a href=””>首页</a></li>
<li><a href=””>菜单1菜单1</a>
<ul>
<li><a
href=””>子菜单1子菜单1子菜单1子菜单1</a></li>
<li><a href=””>子菜单2</a></li>
</ul>
</li>
<li><a href=””>菜单2</a>
<ul>
<li><a
href=””>子菜单1子菜单1子菜单1子菜单1</a></li>
<li><a href=””>子菜单2</a></li>
</ul>
</li>
</ul>

<script>var menu1=new menu(“menu1”);</script>

 

说明：

1、考虑到ul和li页面用的可比多，可以在css前进入#menu1，以对菜单样式举办界定限制。

2、js重若是对鼠标移入和移除事件开展了侦听，对应切换来limouseover和limouseout样式；同时对子菜单的display属性举办更改，达到显示隐藏的出力。

3、同一个页面可以再次调用，不争论，html代码中的JavaScript代码是调用实例，后面的menu1为随意变量名，括号内的menu1为html页面中的id。

本例的毛病：

1、菜单li的mouseover、mouseout和子菜单li的体制一样，即同一个颜料和字体，没有兑现独立设置。

2、由于要包容Ie6和ie7，所以中间使用position:absolute的还要，伸张了left和top属性，top要根据菜单li的完全中度设定。

首先注解：
本人纵然在web前端岗位干了重重年，但迫于岗位对技术要求不高。html,css用的相比较多…

本作品给大家介绍一款不错的jQuery多级手风琴菜单完结代码，有要求精通的恋人可参看，手风琴菜单一般用来下拉领航，由于外观万分不难，使用起来跟手风琴一样可以拉伸和裁减而得名，项目中合适使用手风琴效果会给用户带来卓殊好的心得

亚洲必赢官网 2

前言

前端技术发展高效，很多种类面临前端部分重构，很快意可以让自身举办本次项如今端的重构方案编制，在思索的同时参考了网上广大素材，希望本篇重构方案有一定的完整性，可以带给大家有些在面临重构时有用的事物，同时愿意经过的大牛小牛不领赐教，能给自家略微辅导下重构相关的点，在下感激不尽~

连锁小说

有关搜索：

前日看吗

搜索技术库

回到首页

  • [ C# ]
    判断一个类是还是不是贯彻了某个接口的八种
  • ASP.NET MVC 4
    的JS/CSS打包压缩作用——-过滤文件
  • asp.net使用httphandler打包多CSS或JS文件以加速页
  • [.net 面向对象编程基础] (17)
    数组与聚集，.
  • [ C# ]
    判断一个类是或不是完毕了某个接口的八种
  • 堆分配与栈分配—SAP
    C++电面（6），—sap

有关频道：
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  亚洲必赢官网 ，前端代码  正则表明式  Flex教程  WEB前端教程  

作用如下

  • 在线演示1
  •  
  • 本地下载

一、原项目梳理

先是对原先项目做一个几乎的梳理，既然是重构，当然很多东西是足以继承拿来利用的。

帮客评论

亚洲必赢官网 3

 

1.1页面结构

【亚洲必赢官网】一个css与js结合的下拉菜单协助主流浏览器，jQuery多级手风琴菜单完结代码。自我那边负责的PC端的重构，所以先把页面结构及以内的关联梳理了一回，并用xmind画好社团图，重点成效做上标记，因为vue是渐进式框架，所以我会优先重构主要的部分
xmind结构图我就不上了，职业情操依旧要的

代码解析

jQuery是现在最盛行的JS框架，利用jquery大家能够付出出众多急迅的demo和成果。与此同时jquery相关的插件也可以很有利的成功部分神效，例如jquery
scrollTo插件，可以便宜的成就滑动到指定地方操作。记住由于jquery
scrollto插件是凭借于jquery而发生，所以在头顶文件引用时先引用jquery文件

1.2品类结构

项目结构是针对代码协会结构的，梳理了花色各重大的公文夹及文件并评释相应的内容仍然功效。同样的，使用xmind画出社团图，xmind图略。

HTML

要点：(原文链接：)

1.3前端框架、模板

使用公司内部人员自创框架C.F.F，自定义build文件，内嵌Smarty模板获取后台数据，利用{$xxx}获取后台数据，可是定义了诸多全局变量存储模板数据，造成占用更加多内存、污染命名空间等题材。
概念公共组件供各模块或一定情景调用，复开销高

首先在head间引用jQuery和插件。

  •   jQuery
    scrollTo插件
  •   jQuery框架

1.4第三方库、组件、插件

jquery： JavaScript库
html5shiv：用于解决IE9以下版本浏
览器对HTML5新增标签不识别，并造成CSS不起成效的题材。
Dialog ： jquery弹窗插件
jCarousel : jquery 轮播插件
（重构版抛弃，原因不复杂的光景能原生完成尽量原生落成）
respond：为 IE6-8 以及其余不扶助 CSS3 Media Queries
的浏览器提供媒体询问的 min-width 和 max-width 特性，已毕响应式网页设计
sideToolbar：导航工具
echarts： 图形工具
…

 代码如下

以导航标题为例显示

通过导航标题，举办搜寻能够点击进入相应部分

  1. <nav id=”stickynav”>
  2. <ul id=”nav” class=”clearfix”>
  3. <li><a href=”#topbar”>主页</a></li>
  4. <li><a href=”#about”>关于大家</a></li>
  5. <li><a href=”#photos”>极客图集</a></li>
  6. <li><a href=”#contact”>联系我们</a></li>
  7. </ul>
  8. </nav>

 

 整个页面内容分成4个section，每个section浮现区其他相关内容,按照ID名称当点击每个链接时会滑动到相应的职分，上边是内部一个section部分,此部分不难的显得一些内容语句，可以依照个体需要，编写相应代码

二、重构方案

复制代码

组织显示

  1. <section id=”topbar” class=”section”>
  2. <h1>单页面滑动效果</h1>
  3. <p>单击每一个导航选项完结要旨的滑动效果，其余页面的始末均是来源于</p>
  4. </section>

 

 在同等张页面中提到了以上4个模块，不想分页面突显，希望在一张页面中能够连忙高效的追寻到有关的始末，此时选择jquery
scrollto插件的鼠标点击事件，执行相应的功效，代码如下，由于<a>链接本身持有一个hash
属性，hash是一个可读可写的字符串，该字符串是 URL 的锚部分（从 #
号起头的一对).当点击导航按钮时，所以触发scrollTo方法，$.scrollTo带有三个参数，首个是指定要滚动的目标ID，第四个参数是滚动时间间隔，以微秒为单
位。在本例中，只利用了scrollTo的主导措施。其实scrollTo还足以指定横向纵向滚动，传冲效果等，具体可以参见官方网站的事例： 

2.1开发规范

  • 命名规范
  • html/css/less/sass/scss/javascript编码规范
  • 代码检查工具 eslint

标准那一个东西没有断然的是非曲直，只有同商家如故同单位来制定标准大家都保持一致，同事之间能很快读懂相互的代码，提升开发功能

2.2技艺选型

  • 2.2.1 开发方式：前后端分离

前后端分离开发早已变成方向，到现在新品类大多使用那种形式举办支付，项目完全重构的话当然首选此形式
利益：从前尚未前者这一职位之说，都是后端兼顾开发，数据库、底层服务、接口，页面一把梭，压力大，而且精力有限不可能在各类领域都做的可观。后来有切图这一职，可以把页面写的更卓绝一些，通过沙盘和央浼接口合营开展数量交互，前端都是环环相扣耦合于后端，那种景观下开发，互换开销，开发进度中进度着重开支都是较高的。前后端分离后，分工更明确，各自专注做好自己小圈子的事，同时开工，不相互保护，效用高
原理：（此图来自某博客，地址忘记。
望博主看到能联络我加上转发出处，在此抱歉~）

亚洲必赢官网 4
拉开一个当地的服务器来运转自己的前端代码，以此来模拟真实的线上环境；
使用nodejs的express框架来拉开一个地点的服务器，然后选择nodejs的一个http-proxy-middleware插件将客户端发往nodejs的伸手转载给真正的服务器，让nodejs作为一个中间层。
下一场就是多少难题了，后端接口在付出中，前端需求多少如何做吧？mockjs精晓一下，
API地址https://github.com/nuysoft/Mo… ，当后端设计出AP接口文档后，大家就足以选拔mockjs模拟出对应格式的假数据进行付出，等到接口完全做到之后，再开展接口联调

  • 2.2.2 MVVM框架：vue

Vue是一个渐进式框架，不难入手、不难协同，可以很快灵活的开销迭代。同时也是时下主流三大框架里读书费用低于的，如今，公司也在主推vue作为首选框架，举办有关技能的扶植。
Vue社区相对热度高，组件、库、轮子多，资源整合链接：https://segmentfault.com/p/12…
体积小、自由度高、脚手架创设的系列自带webpack打包创设工具
即便vue是单页应用，但是可以透过布署webpack举办多页开发

  • 2.2.3 css预编译语言

运用css预编译语言来写css会提升编制css功能（具体提升多少百分比功能可机关测试，我觉得找一段写好的css，先用css写五遍，再用less或者此外写一遍总括耗时比例，这里忽略写样式时候想想的岁月举办测试）
预编译语言可以定义变量（比如常用的水彩、字体、字号等）、嵌套写法、可以持续其余类的品质、总括、内置函数等

  • 2.2.4 常用类库

图片工具—echarts （对应场景 – xxx）
适配插件—flexible taobaoH5极限适配方案 （对应场景—xxx）
Lodash – JS函数库 （对应场景—xxx）
ElementUI – UI库 （对应场景—xxx）
One-Page-Nav – 导航插件 （对应场景—xxx）
具体情况我就不写了，依据你们差其他政工必要去看清需求如何类库插件之类的，预先决定好，避防半途做怎么着都要去花时间思考

<script type=”text/javascript” src=”js/jquery.js”></script> 
<script type=”text/javascript” src=”js/accordion.js”></script> 

事件处理

  1. <script>
  2. $(function(){
  3. $(“#nav
    a”).click(function(e){
  4. e.preventDefault();
  5. $(‘html,body’).scrollTo(this.hash,this.hash);
  6. });
  7. });
  8. </script>

 

<script>代码可以直接嵌入到html页面中，也得以书写成外部文件进行引入。

2.3构建工具

既然如此拔取了vue框架，营造工具当然采用vue自带的webpack了，对于webpack有人说会配置项目就行，有人说要深深探讨，这些看个人须要自己认为

继之，在body间写上菜单主体代码，HTML代码将由一多级无连串表组成。

累加样式

最后根据民用的html中dom结构，书写相应的css代码，举办页面的吹嘘，例如对导航标题进行美化，设计成类似按钮形状

  1. #stickynav #nav li { display: inline;}
  2. #stickynav #nav li a {
  3. display:
    block;
  4. float: left;
  5. margin-right: 8px;
  6. font-size: 1.5em;
  7. font-weight: 200;
  8. padding:
    11px 8px;
  9. background:
    #ff9900;
  10. -webkit-border-radius: 4px;
  11. -moz-border-radius: 4px;
  12. border-radius: 4px;
  13. color: #ffffff;
  14. }

 

2.4开发功用

  • PS一键切图作用
  • emmet急迅编写HTML

#page>div.logo+ul#navigation>li*5>a{Item $}

1
#page>div.logo+ul#navigation>li*5>a{Item $}

按下tab键，上述代码 等于

<div id=”page”> <div class=”logo”></div> <ul
id=”navigation”> <li><a href=””>Item
1</a></li> <li><a href=””>Item
2</a></li> <li><a href=””>Item
3</a></li> <li><a href=””>Item
4</a></li> <li><a href=””>Item
5</a></li> </ul> </div>

1
2
3
4
5
6
7
8
9
10
<div id="page">
    <div class="logo"></div>
    <ul id="navigation">
        <li><a href="">Item 1</a></li>
        <li><a href="">Item 2</a></li>
        <li><a href="">Item 3</a></li>
        <li><a href="">Item 4</a></li>
        <li><a href="">Item 5</a></li>
    </ul>
</div>

背景：原项目写的纯css

  • less/sass/scss 快速编写css

比如

@base-size: 40px; @theme-color: #ccc; @my-selector: title; .aa {
font-weight: bold; } .@{my-selector} { font-size: @base-size; color:
@theme-color; margin: 100/2px 200/10px; &-ok { color: green; } &-no {
color: yellow; } > li{ &:extend(.aa); &:hover { color: #fff; } } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@base-size: 40px;
@theme-color: #ccc;
@my-selector: title;
 
.aa {
  font-weight: bold;
}
 
.@{my-selector} {
  font-size: @base-size;
  color: @theme-color;
  margin: 100/2px 200/10px;
  &-ok {
    color: green;
  }
  &-no {
    color: yellow;
  }
  > li{
    &:extend(.aa);
    &:hover {
      color: #fff;
    }
  }
}

编译后为：

.aa, .title > li { font-weight: bold; } .title { font-size: 40px;
color: #ccc; margin: 50px 20px; } .title-ok { color: green; } .title-no
{ color: yellow; } .title > li:hover { color: #fff; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.aa,
.title > li {
  font-weight: bold;
}
.title {
  font-size: 40px;
  color: #ccc;
  margin: 50px 20px;
}
.title-ok {
  color: green;
}
.title-no {
  color: yellow;
}
.title > li:hover {
  color: #fff;
}

那边只写了一点点，作用还有众多的
less官网选自己选自己
sass官网：选我选我

  • webpack：压缩代码、图片，合并JS，检测文件更新等活动举行
  • webstorm自带取色器（其余IDE应该都有，自行找下）

写颜色色值的地方可以点击调出取色板（不避免css），可以选颜色也可以应用吸管取色（屏幕任意处
不限于IDE内部），也有取色的网站可以收藏到书签工具文件夹里亚洲必赢官网 5

  • Mockjs：下面有介绍mockjs，那里不再赘言，由于自己有过手写假数据的凄凉经历，故把mockjs列入可以增长支付功效行列，因为前后端分离后左右端同时开发，假数据已成必须

比如：

let template = { ‘anchorList|3-6’:[{ ‘id|1-100’: 1, ‘name’: ‘@cname’,
‘date’: ‘@date(yyyy-MM-dd)’, biubiubiu: () =>
Mock.Random.string(‘abcdefghijklmnopqrstuvwxyz’, 5), ‘arr|2-5’: [{
‘age|10-20’: 0 }] }] } console.log(Mock.mock(template))

1
2
3
4
5
6
7
8
9
10
11
12
let template = {
    ‘anchorList|3-6’:[{
      ‘id|1-100’: 1,
      ‘name’: ‘@cname’,
      ‘date’: ‘@date(yyyy-MM-dd)’,
      biubiubiu: () => Mock.Random.string(‘abcdefghijklmnopqrstuvwxyz’, 5),
      ‘arr|2-5’: [{
        ‘age|10-20’: 0
      }]
    }]
  }
  console.log(Mock.mock(template))

输出：亚洲必赢官网 6

 

  • 模块化、组件化开发：前后端解耦后，前端之间同盟也可以解耦，各自承担分歧的模块开发，写自己的零件，最终通讯部分再一并

 代码如下

结束语

jQuery拥有很多灵活的小插件，能够支持大家在做事的时候，少写过多的代码，而且珍惜开支低，有效的节约了光阴。

万一有趣味可以到社区的课程库进展更加多的上学。

(原文链接：)

爱好前端技术的同学么，能够不停关怀自身的稿子同时点击上面按钮关切本身哦，^_^，大家一齐调换和前进~~
 ，希望我的稿子，请多多留言， 灌水就不要了，来点干货留言 ，嘿嘿

2.5属性优化

  • 2.5.1 数据存取

☆ 尽量使用部分变量
☆ 对象成员的嵌套深度与读取时间成正比，嵌套过深要拓展优化

  • 2.5.2 DOM

☆ 尽量裁减DOM操作（访问和修改都算）的次数
☆ 访问元素时使用最快的API
☆ 使用事件委托来压缩事件处理器的数量
☆ 收缩重绘和重排的次数

  • 2.5.3 算法和流程

☆ for循环、while循环、do-whild循环比for in 要快
☆ 优化循环体的复杂度
☆ 最小化属性查找：

for(let i = 0, len = arr.length; i < len; i++){ … }

1
2
3
4
for(let i = 0, len = arr.length; i < len; i++){
 
…
}

☆ 当条件较少时
使用if-else更易读，而当规则较多时if-else品质负担比switch大，易读性也没switch好。
☆ 对于if else 几率越大的口径越靠前判断 比如：

☆ 当总括量很大且再次的时候，用Memoization缓存总结结果

  • 2.5.4 字符串拼接

正如下四中字符串拼接方法的特性：
A：str = str + ‘a’+’b’
B:str += ‘a’ + ‘b’
C: arr.join(”)
D:str.concat(‘b’,’c’)
☆ Chrome65上测试的是A优于B优于C优于D
其它浏览器不确定

  • 2.5.5 Ajax

☆ 服务端设置HTTP头音讯保管响应会被浏览器缓存
☆ 客户端讲获取的新闻存到本地避免双重伸手（localstorage sessionstorage
cookice）
☆ 设置HTTP头音讯，expiresgaosu告诉浏览器缓存多长时间
☆ 裁减HTTP请求，合并css、js、图片资源文件等或应用MXHR
☆ 通过协助文件用Ajax获取可缩短页面加载时间

那边只列了相比重大的一有的，安利一下本人后面写的属性优化统计传送门

复制代码

2.6模块化组件化

模块化：以前由CommonJs、英特尔、CMD等落到实处，现在ES6的Module（原生模块化）完全能够代替，灵活、高效是模块化开发的好处，对于某个模块我想出口就输出，想引入就引入，输出引入也只需一个第一词（export/import），而且ES6模块语法援救暴露常量、单一接口、所有接口、混合揭发、取别名等等灵活快速是不必置疑的
合作webpack在打造的时候把资源整合打包压缩自动处理了有的在先须求手动举办的属性优化难题了
组件化：解决复杂工作的痛点，把纷纭的作业分为很多少个零件分开开发管理以减低开发难度和保安资产。一个5000行的页面和十个500行命名规范的组件哪个开发、维护不难？
组件灵活随加随用，可复用幸免重复花费，可结合使用

<ul class=”nav”> 
   <li><a href=”; 
   <li><a href=”#”>服务</a></li> 
   <li><a href=”#”>案例</a></li> 
   <li><a href=”#”>文章</a></a> 
        <ul> 
           <li><a href=”#” target=”_blank”>XHTML/CSS</a></li> 
           <li><a href=”#”>Javascript/Ajax/jQuery</a> 
                <ul> 
                    <li><a href=”#”>Cookies</a></li> 
                    <li><a href=”#”>Event</a></li> 
                    <li><a href=”#”>Games</a></li> 
                    <li><a href=”#”>Images</a></li> 
                </ul> 
            </li> 
            <li><a href=”#” target=”_blank”>PHP/MYSQL</a></li> 
            <li><a href=”#” target=”_blank”>前端观看</a></li> 
            <li><a href=”#” target=”_blank”>HTML5/移动WEB应用</a></li> 
        </ul> 
    </li> 
    <li><a href=”#”>关于</a></li> 
</ul> 

2.7前端安全

  • 2.7.1 XSS

XSS是指浏览器错误的将攻击者提供的用户输入数据作为JavaScript脚本给执行了
解决办法：校验用户输入，特殊字符举行转义
Vue 双花括号自带过滤效果

  • 2.7.2 本地存储数据走漏

本地存储的持有数据就都可能被攻击者的JS脚本读取到，所以敏感、机密音信都不提出在前端存储
const常量 let 块级成效域避免代码习惯不好导致的成效域混乱难题

 

2.8用户体验

☆ 优化加载速度，收缩用户等待时间
☆ 收缩不必要的无谓的操作
☆
动画交互合理，短平快的互相或者动画片更合乎知学宝，我们是功用型网站不是欣赏型网站，不需要太花里胡哨的动画，那样反而增添等待时间，不尽人意
☆ 更舒心的UI（字体、图片、logo，按钮、列表等）
☆ 处理好广大小的底细的地点，比如… 针对项目的地点就略了

至于用户体验那块暂时没找到相比权威的书，要是咱们有觉得不错的迎接留言推荐~

CSS

end

写的不是很细，但愿很多地点都覆盖到了，欢迎留言补充~
注：内容有不当或者失实处请指正~转发请注解出处~谢谢合作！

1 赞 4 收藏
评论

亚洲必赢官网 7

自然，大家要为那一个无系列表加上样式，让它不行简洁的展现在显示器上。

 代码如下

复制代码

.nav {width: 213px; padding: 40px 28px 25px 0;}  
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em; list-style: none;}  
ul.nav li {}  
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px; color: #000; display: block; 
text-decoration: none; font-weight: bolder;} 
ul.nav li a:hover {background-color:#675C7C;    color:white;} 
ul.nav ul { margin: 0; padding: 0;display: none;}  
ul.nav ul li { margin: 0; padding: 0; clear: both;}  
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight: normal;} 
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}  
ul.nav ul ul li a {color:silver; padding-left: 40px;}  
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}  
ul.nav span{float:right;} 

jQuery

调用accordion插件，设置相关属性，一个漂亮的手风琴效果就大功告成了。

 代码如下

复制代码

$(function(){ 
   $(“.nav”).accordion({ 
        speed: 500, 
        closedSign: ‘[+]’, 
        openedSign: ‘[-]’ 
    }); 
});  

Accordion提供以下选项设置：

speed：数字飞秒，设置菜单举行和关闭的年月。

closedSign：当下级菜单关闭时，展现于菜单旁边的始末，可以是任意html或者text。

openedSign：当下级菜单展开时，突显于菜单旁边的内容，可以是任意html或者text。

留神，假如您想菜单开首载入时就进展以来，可以在相应要开展的li上加class=”active”。

实例代码

 代码如下

复制代码

<!DOCTYPE HTML>
<html>
<head>
<meta charset=”utf-8″>

<link rel=”stylesheet” type=”text/css” href=”../css/main.css” />
<script type=”text/javascript”
src=”../js/jquery.js”></script>
<script type=”text/javascript”
src=”accordion.js”></script>
<script type=”text/javascript”>
$(function(){
   $(“.nav”).accordion({
        //accordion: true,
        speed: 500,
     closedSign: ‘[+]’,
  openedSign: ‘[-]’
 });
});
</script>
<style>
.demo{width:300px; margin:40px auto; padding:10px;
background:#f7f7f7}
ul{list-style:none}
.nav {width: 213px; padding: 40px 28px 25px 0; font-family: “Microsoft
yahei”, Arial, Helvetica, sans-serif;}
ul.nav {padding: 0; margin: 0; font-size: 1em; line-height: 0.5em;
list-style: none;}
ul.nav li {}
ul.nav li a {line-height: 10px; font-size: 14px; padding: 10px 5px;
color: #000; display: block; text-decoration: none; font-weight:
bolder;}
ul.nav li a:hover {background-color:#675C7C;    color:white;}
ul.nav ul { margin: 0; padding: 0;display: none;}
ul.nav ul li { margin: 0; padding: 0; clear: both;}
ul.nav ul li a { padding-left: 20px; font-size: 12px; font-weight:
normal;}
ul.nav ul li a:hover {background-color:#D3C99C; color:#675C7C;}
ul.nav ul ul li a {color:silver; padding-left: 40px;}
ul.nav ul ul li a:hover { background-color:#D3CEB8; color:#675C7C;}
ul.nav span{float:right;}
</style>
</head>

<body>

<div id=”main”>
      <div class=”demo”>
      <ul class=”nav”>
         <li><a href=””
target=”_blank”>首页</a></li>
         <li><a href=”#”>服务</a>
              <ul>
                  <li><a
href=”#”>JAVASCRIPT</a></li>
                  <li><a
href=”#”>PHP</a></li>
                  <li><a
href=”#”>MYSQL</a></li>
                  <li><a
href=”#”>LINUX</a></li>
              </ul>
         </li>
         <li><a href=”#”>案例</a></li>
         <li><a href=”#”>文章</a></a>
              <ul>
                   <li class=”active”><a href=”4.html”
target=”_blank”>XHTML/CSS</a></li>
                   <li><a
href=”#”>Javascript/Ajax/jQuery</a>
                        <ul>
                            <li><a
href=”#”>Cookies</a></li>
                            <li><a
href=”#”>Event</a></li>
                            <li><a
href=”#”>Games</a></li>
                            <li><a
href=”#”>Images</a></li>
                        </ul>
                   </li>
                   <li><a href=”6.html”
target=”_blank”>PHP/MYSQL</a></li>
                   <li><a href=”7.html”
target=”_blank”>前端观望</a></li>
                   <li><a href=”9.html”
target=”_blank”>HTML5/移动WEB应用</a></li>
              </ul>
         </li>
         <li><a href=”about.html”
target=”_blank”>关于</a></li>
      </ul>
   </div>
  
</div>

</body>
</html>

jQuery多级手风琴菜单下载：

…

网站地图xml地图