制作多级菜单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 ...
随机推荐
- 如何用Android Studio同时使用SVN和Git管理项目
这篇来讲讲如何在 Android Studio 上同时用 SVN 和 Git 来管理项目.我知道,你肯定会说我吃饱了撑着,没事找事做,为啥要同时用 SVN 和 Git 来管理项目.问题是,我也不想啊, ...
- 2-SAT问题总结
2-SAT问题总结 2-SAT问题:n个布尔型的变量,给出m个约束条件,约束条件例如:A,B不能同时为真,A,B必须同时为真等. 看了算法入门经典中的解决办法,关于这种解决办法比较容易理解,并且效率也 ...
- css超过一定长度显示省略号
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
- javascript 可多选的下拉框 multiselect
首先引用一个写的很好的博客http://www.cnblogs.com/landeanfen/p/5013452.html 我使用的是bootstrap-multiselect,实现功能是 选择下拉框 ...
- css中的em用法
px:是相对于浏览器分辨率的一个度量单位 em是一个相对于父元素的font-size的大小的一个度量单位 1.浏览器的默认字体大小是16px 2.如果元素自身没有设置字体大小,那么元素自身上的所有属性 ...
- [java基础] 遇到的一个关于返回值泛型的问题
在写代码的时候这样写: import java.util.ArrayList; import java.util.List; public class TestConversion { public ...
- 通过PING命令中的TTL来判断对方操作系统
---恢复内容开始--- 通过PING命令中的TTL来判断对方操作系统简单来说,TTL全程Time to Live,意思就是生存周期.首先要说明ping命令是使用的网络层协议ICMP,所以TTL指的是 ...
- js个位数补0
//获取并格式化当前时间 var _getTime = function(){ var arr=['00','01','02','03','04','05','06','0,'08','09'], / ...
- 为什么选择使用Sass而不是Less？
这篇文章主要解答以下几个问题,供前端开发者的新手参考. 1.什么是Sass和Less? 2.为什么要使用CSS预处理器? 3.Sass和Less的比较 4.为什么选择使用Sass而不是Less? 什么 ...
- [转载] Java中动态加载jar文件和class文件
转载自http://blog.csdn.net/mousebaby808/article/details/31788325 概述 诸如tomcat这样的服务器,在启动的时候会加载应用程序中lib目录下 ...