<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<title>用hide()和show()方法</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>

//制作多级菜单
/*$(function(){

$('li:has(ul)').click(function(e){
if(this==e.target){
if($(this).children().is(':hidden')){
//如果子项是隐藏的则显示
$(this).css('list-style-image','url(../images/fenleijian.jpg)')
.children().show();
}else{
//如果子项是显示的则隐藏
$(this).css('list-style-image','url(../images/fenleijia.jpg)')
.children().hide();
}
}
return false; //避免不必要的事件混绕
}).css('cursor','pointer').click(); //加载时触发单击事件

//对于没有子项的菜单，统一设置
$('li:not(:has(ul))').css({
'cursor':'default',
'list-style-image':'none'
});
});*/
//制作多级菜单end

//toggle()方法实现自动显隐变幻
$(function(){
$('li:has(ul)').click(function(e){
if(this==e.target){
$(this).children().toggle();
$(this).css('list-style-image',($(this).children().is(':hidden')?'url(../images/fenleijia.jpg)':'url(../images/fenleijian.jpg)'))
}
return false; //避免不必要的事件混绕
}).css('cursor','pointer').click(); //加载时触发单击事件

//对于没有子项的菜单，统一设置
$('li:not(:has(ul))').css({
'cursor':'default',
'list-style-image':'none'
});
});

</script>

</head>
<body>
<ul>
<li>第1章 Javascrip简介</li>
<li>第2章 Javascript</li>
<li>第3章 CSS基础
<ul>
<li>第3.1节 CSS的概念</li>
<li>第3.2节 使用CSS控制页面
<ul>
<li>3.2.1 行内样式</li>
<li>3.2.2 内嵌式</li>
</ul>
</li>
</ul>
</li>
<li>第4章 CSS进阶
<ul>
<li>第4.1节 div标记与span标记</li>
<li>第4.2节 div标记与span标记</li>
<li>第4.3节 div标记与span标记
<ul>
<li>4.3.1 float定位</li>
<li>4.3.2 position定位</li>
<li>4.3.3 z-index空间位置</li>
</ul>
</li>

</ul>
</li>
</ul>
</body>
</html>

制作多级菜单hide（）与show（） toggle（）的更多相关文章

  1. python基础_制作多级菜单_(运用：字典_列表_元组等知识)

    #!/usr/bin/env python # -*- coding:utf-8 -*- #Author: nulige db = {} path = {} while True: temp = db ...

  2. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  3. Vue2 实现树形菜单（多级菜单）功能模块

    结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...

  4. MVC5+EF6 入门完整教程13 -- 动态生成多级菜单

    稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...

  5. java 24 - 7 GUI之 创建多级菜单窗体

    需求: 创建多级菜单 步骤: A:创建窗体对象(并设置属性和布局) B:创建菜单栏 C:创建菜单和子菜单 D:逐步添加菜单(子菜单添加到菜单中,菜单添加到菜单栏中) E:窗体中设置菜单栏(菜单栏并不是 ...

  6. 单片机C语言下LCD多级菜单的一种实现方法

    摘要:     介绍了在C 语言环境下,在LCD 液晶显示屏上实现多级嵌套菜单的一种简便方法,提出了一个结构紧凑.实用的程序模型. 关键词: 液晶显示屏; 多级菜单; 单片机; C 语言; LCD 中 ...

  7. zTree下拉菜单多级菜单多选实现

    惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox ...

  8. Jquery多级菜单插件Slimmenu使用说明

    Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...

  9. python作业设计：多级菜单，并可依次进入各级子菜单

    '''作业三:多级菜单 三级菜单 可依次选择进入各子菜单 所需新知识点:列表.字典 ''' data = { "北京":{ "昌平":{ "沙河&qu ...

随机推荐

  1. Branch Prediction

    Pipeline的优点 现代微处理器的pipeline中包含许多阶段,粗略地可以分成fetch.decode.execution.retirement,细分开来可以分成十多甚至二十多个阶段.在处理器处 ...

  2. 解析 C# 7中的元组类型（ValueTuple）

    System.Tuple 类型是在.NET 4.0中引入的,但是有两个明显的缺点: (1) Tuple 类型是引用类型. (2) 没有构造函数支持. 为了解决这些问题,C# 7 引入了新的语言功能以及 ...

  3. 蓝桥杯-算法训练--ALGO-5 最短路

    问题描述 给定一个n个顶点,m条边的有向图(其中某些边权可能为负,但保证没有负环).请你计算从1号点到其他点的最短路(顶点从1到n编号). 输入格式 第一行两个整数n, m. 接下来的m行,每行有三个 ...

  4. 透过浏览器看HTTP缓存[转载]

    http://www.admin10000.com/document/6299.html     作为前端开发人员,对于我们的站点或应用的缓存机制我们能做的似乎不多,但这些却是与我们关注的性能息息相关 ...

  5. windows下配置wampserver

    第一,打开局域网访问 配置文件:点击右下角的WAMP 服务器小托盘,选择Apache>httpd.conf 搜索关键字 "deny from ",会发现一处 "de ...

  6. 【Win 10 应用开发】UI Composition 札记（五）：灯光

    UI Composition 除了能够为 UI 元素建立三维空间外,还有相当重要的一个部件——灯光.宇宙万物的精彩缤纷,皆源于光明,光,使我们看到各种东西,除了黑洞之外的世界都是五彩斑谰的.故而,真要 ...

  7. 零基础如何迅速学习HTML5？新手小白学习web前端H5自白！

    很多的人在毕业之后才发现原来学的专业不是自己想做的工作,或者专业对口的工作待遇让人觉得并不满意,于是很多人选择培训机构学新的一门技能转换行业.IT行业的web前端H5受到很多学员的青睐.那么学习web ...

  8. 4年java开发，该何去何从！

    以前都是一直看,今天楼主第一次发博,还望各位不吝赐教. 今天也没别的要说的,就是吐槽一下楼主这几天的面试遭遇,感觉都有点怀疑人生了. 先说说楼主的情况吧,13年毕业本科计算机专业,到现在一直做java ...

  9. Machine Learning &&Deep Learning&&Sklearn

    参考资料:https://github.com/ty4z2008/Qix/blob/master/dl.md https://morvanzhou.github.io/ 如图,先了解一下都有什么模型方 ...

  10. Files and Directories

    Files and Directories Introduction     In the previous chapter we coveredthe basic functions that pe ...