制作多级菜单hide（）与show（） toggle（）
<!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（）的更多相关文章
- python基础_制作多级菜单_(运用：字典_列表_元组等知识)
#!/usr/bin/env python # -*- coding:utf-8 -*- #Author: nulige db = {} path = {} while True: temp = db ...
- 前端开发css实战：使用css制作网页中的多级菜单
前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...
- Vue2 实现树形菜单（多级菜单）功能模块
结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...
- MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
稍微有一定复杂性的系统,多级菜单都是一个必备组件. 本篇专题讲述如何生成动态多级菜单的通用做法. 我们不用任何第三方的组件,完全自己构建灵活通用的多级菜单. 需要达成的效果:容易复用,可以根据mode ...
- java 24 - 7 GUI之 创建多级菜单窗体
需求: 创建多级菜单 步骤: A:创建窗体对象(并设置属性和布局) B:创建菜单栏 C:创建菜单和子菜单 D:逐步添加菜单(子菜单添加到菜单中,菜单添加到菜单栏中) E:窗体中设置菜单栏(菜单栏并不是 ...
- 单片机C语言下LCD多级菜单的一种实现方法
摘要: 介绍了在C 语言环境下,在LCD 液晶显示屏上实现多级嵌套菜单的一种简便方法,提出了一个结构紧凑.实用的程序模型. 关键词: 液晶显示屏; 多级菜单; 单片机; C 语言; LCD 中 ...
- zTree下拉菜单多级菜单多选实现
惯例,先上图: 这是在一个项目中,为了满足样式美观.多级菜单以及多选而将zTree插件更改过后的效果. 在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox ...
- Jquery多级菜单插件Slimmenu使用说明
Jquery多级菜单插件Slimmenu使用说明 现在扁平化设计逐渐的成为了趋势,不管是pc web,还是移动互联网的应用开发,都在研究和设计Flat ui, 这里有一篇文章说明扁平化的设计的一些想法 ...
- python作业设计：多级菜单，并可依次进入各级子菜单
'''作业三:多级菜单 三级菜单 可依次选择进入各子菜单 所需新知识点:列表.字典 ''' data = { "北京":{ "昌平":{ "沙河&qu ...
随机推荐
- SQL注入技术
TalkTalk的信息泄漏事件导致约15万人的敏感信息被暴露,涉嫌造成这一事件的其中一名黑客使用的并不是很新的技术.事实上,该技术的「年纪」比这名15岁黑客还要大两岁. ［译注:TalkTalk是英国 ...
- 暑假练习赛 006 B Bear and Prime 100
Bear and Prime 100Crawling in process... Crawling failed Time Limit:1000MS Memory Limit:262144KB ...
- Pycharm，Python原生IDE?
老套路,安装和使用(Win7x64.JDK神马滴早已装好). 1.安装 网上下下来后就这东西 Next D盘路径 我选择.我喜欢 开装 好慢,以后用光纤 O了 桌面小图标 2.使用 以管理员身份打开软 ...
- 配置mysql为主主复制步骤
mysql版本:mysql-5.6.24-solaris10-sparc-64bit.tar 操作系统:solaris 11g u10 操作用户:使用非root进行操作安装,a路服务器ip地址为192 ...
- Java面试题技术类
目录 1.面向对象编程的三大特性是什么? 2.String 和StringBuffer的区别 3.说出ArrayList,Vector, LinkedList的存储性能和特性 4.Collection ...
- docker下编译mangoszero WOW60级服务端（一）
这几天看到暴雪准备开放怀旧服的新闻,突然想到几年前用大芒果window一键服务端自己搭建过服务,就想着在Linux环境下重新编译一套,毕竟Linux作为服务端,性能和稳定性都会高一些,于是在mac虚拟 ...
- JAVA调用matlab代码
做实验一直用的matlab代码,需要嵌入到java项目中,matlab代码拼拼凑凑不是很了解,投机取巧采用java调用matlab的方式解决. 1. matlab版本:matlabR2014a ...
- MarkdownPad2使用高亮插件
MarkdownPad 2有插入代码块的功能,但样式却不尽人意,但又不想换个编辑器,找了挺多相关资料,最后在MarkdownPad 2集成prettify高亮插件. 如下相关资料: [HTML] Pr ...
- Struts2-整理笔记（三）结果处理跳转、获得servletAPI原生
在struts2中有很多种跳转方式如下是在struts-default.xml截取的一段源码,常用的跳转有 转发:dispatcher.重定向:redirect.转发到Action:chain.重定向 ...
- curl安装
问题1: curl: error while loading shared libraries: libcurl.so.4: cannot open shared object file: No su ...