1.javascript方法

<style>
#navigation {
width: 200px;
font-family: Arial;
}
#navigation > ul {
list-style-type: none;
/* 不显示项目符号 */ margin: 0px;
padding: 0px;
}
#navigation > ul > li {
border-bottom: 1px solid #ED9F9F;
/* 添加下划线 */
}
#navigation > ul > li > a {
display: block;
/* 区块显示 */ padding: 5px 5px 5px 0.5em;
text-decoration: none;
border-left: 12px solid #711515;
/* 左边的粗红边 */ border-right: 1px solid #711515;
/* 右侧阴影 */
}
#navigation > ul > li > a:link,
#navigation > ul > li > a:visited {
background-color: #c11136;
color: #FFFFFF;
}
#navigation > ul > li > a:hover {
/* 鼠标经过时 */ background-color: #990020;
/* 改变背景色 */ color: #ffff00;
/* 改变文字颜色 */
}
/* 子菜单的CSS样式 */ #navigation ul li ul {
list-style-type: none;
margin: 0px;
padding: 0px 0px 0px 0px;
}
#navigation ul li ul li {
border-top: 1px solid #ED9F9F;
}
#navigation ul li ul li a {
display: block;
padding: 3px 3px 3px 0.5em;
text-decoration: none;
border-left: 28px solid #a71f1f;
border-right: 1px solid #711515;
}
#navigation ul li ul li a:link,
#navigation ul li ul li a:visited {
background-color: #e85070;
color: #FFFFFF;
}
#navigation ul li ul li a:hover {
background-color: #c2425d;
color: #ffff00;
}
#navigation ul li ul.myHide {
/* 隐藏子菜单 */ display: none;
}
#navigation ul li ul.myShow {
/* 显示子菜单 */ display: block;
}
</style> <script type="text/javascript">
function changemenu() {
//通过父元素li,找到兄弟元素ul
var bList = this.parentNode.getElementsByTagName("ul")[0];
//CSS交替更换来实现显、隐
if (bList.className == "myHide")
bList.className = "myShow";
else
bList.className = "myHide";
}
window.onload = function() {
var oList = document.getElementById("listUL");
var nList = oList.childNodes; //子元素
var sList;
for (var i = 0; i < nList.length; i++) {
//如果子元素为li,且这个li有子菜单ul
if (nList[i].tagName == "LI" && nList[i].getElementsByTagName("ul").length) {
slist = nList[i].firstChild; //找到超链接
slist.onclick = changemenu; //动态添加点击函数
}
}
}
</script> <div>
<div id="navigation">
<ul id="listUL">
<li><a href="#">Home</a>
</li>
<li><a href="#">News</a>
<ul class="myHide">
<li><a href="#">Lastest News</a>
</li>
<li><a href="#">All News</a>
</li>
</ul>
</li>
<li><a href="#">Sports</a>
<ul class="myHide">
<li><a href="#">Basketball</a>
</li>
<li><a href="#">Football</a>
</li>
<li><a href="#">Volleyball</a>
</li>
</ul>
</li>
<li><a href="#">Weather</a>
<ul class="myHide">
<li><a href="#">Today's Weather</a>
</li>
<li><a href="#">Forecast</a>
</li>
</ul>
</li>
<li><a href="#">Contact Me</a>
</li>
</ul>
</div> </div>

2.附jQuery方法

<script type="text/javascript">
$(function() {
//找到所有li标记中包含的ul标记
//然后找到它的前一个标记(即<a>),并添加click()事件
$("li").find("ul").prev().click(function() {
//点击<a>时让它后面的兄弟(即<ul>)切换CSS样式
$(this).next().toggleClass("myHide");
});
});
</script>

3.附jQuery toggle()方法

<script language="javascript">
$(function(){
$("li").find("ul").prev().click(function(){
$(this).next().toggle();
});
$("li:has(ul)").find("ul").hide();
});
</script>

Javascript制作伸缩的二级菜单的更多相关文章

  1. jQuery - 制作点击显示二级菜单效果

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. javascript 特效实现(3)—— 鼠标滑过显示二级菜单效果

    1. 关键代码:使用 switch 或 if 判断语句,改变对应的二级菜单显示方式为 block 或 none function selectTabMenu(i){ switch(i){ case 7 ...

  3. 个人练习:使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  4. CSS制作二级菜单时,二级菜单与一级菜单不对齐

    效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul& ...

  5. html+css二级菜单制作!

    二级菜单!!<!DOCTYPE html<html lang="e<head> <meta charset="UTF-8"> < ...

  6. JavaScript(jquery)实现二级菜单联动

    为什么写这篇随笔? 二级菜单的联动一直是我心中一块石头,犹记得大一的时候只会用一点的Dreamweaver,当时做二级菜单难受啊,啥都不会,网上找了些资料,也看不懂别人的代码更别说用起来了 前些日子. ...

  7. JavaScript处理数据完成左侧二级菜单的搭建

    我们在项目中应用的后台管理框架基本上都是大同小异,左侧是一个二级菜单,点击选中的菜单,右侧对应的页面展示.我把前端页面封装数据的过程整理了一下,虽然不一定适合所有的管理页面,仅作为案例来参考,只是希望 ...

  8. bootstrap学习笔记之为导航条添加标题、二级菜单及状态 http://www.imooc.com/code/3120

    为导航条添加标题.二级菜单及状态 加入导航条标题 在Web页面制作中,常常在菜单前面都会有一个标题(文字字号比其它文字稍大一些),其实在Bootstrap框架也为大家做了这方面考虑,其通过" ...

  9. Jquery垂直下拉二级菜单

    自己做了一个基于Jquery 的垂直下拉二级菜单功能,直接看图: Html的代码如下: <!DOCTYPE html> <html> <head> <meta ...

随机推荐

  1. OI数学 简单学习笔记

    基本上只是整理了一下框架,具体的学习给出了个人认为比较好的博客的链接. PART1 数论部分 最大公约数 对于正整数x,y,最大的能同时整除它们的数称为最大公约数 常用的:\(lcm(x,y)=xy\ ...

  2. windbg符号路径设置

    .sympath C:\Users\leoyin\Desktop\last;SRV*C:\Symbols*http://msdl.microsoft.com/download/symbols  

  3. 【Linux】CentOS7上解压zip需要安装uzip

    1.安装zip.unzip应用 yum install zip unzip 2.压缩和解压文件 以下命令均在/home目录下操作 cd /home #进入/home目录 a.把/home目录下面的my ...

  4. AutoCAD.Net 实现创建wipeout遮罩实体

    [CommandMethod("mywipeout")] public static void mywipeout() { // 获取当前文档和数据库 Document acDoc ...

  5. SQL语句insert into 不存在则插入,存在则修改

    一 测试表的创建 -- ---------------------------- -- Table structure for User -- ---------------------------- ...

  6. spring里面的ioc的理解?

    spring里面的ioc就是控制反转,其实现核心是DI(依赖注入),控制反转不向以前java代码里面,通过new关键字来实现创建对象,这样每段代码之间的耦合度就比较高,为了降低每个小模块之间的耦合度, ...

  7. PHP开发微信公众号(二)消息接受与推送

    上一篇文章我们知道怎么获取二维码,这样别人就可以扫描二维码来关注我们,但是别人关注后,发送消息,我们怎么进行相关处理? 这里我们就来学习下怎么处理处理这些消息,以及推送消息. 学习之前首先你需要有一个 ...

  8. 2016级算法第二次上机-D.Bamboo的饼干

    Bamboo的饼干 分析 从两个数组中各取一个数,使两者相加等于给定值.要注意去重和排序 难度不大,方法很多,基本只要不大于O(n^2 ) 的都可以过.本意想考察二分搜索 还可以借助stl中的map, ...

  9. 高阶篇:1)竞品(标杆产品)的拆解和分析benchmarking

    本章目的:从标杆产品(竞品)逆向推出装配.制造.设计流程及难点. 1.竞品分析的目的 ①为企业制定市场准确的产品开发目标: ②为企止提供产品开发全流程性能结构对标参考数据指标: ③最优性价比务件下,为 ...

  10. 高阶篇:4.1.2)QFDII(设计要求逐层分配给各零件)

    本章目的:明确QFDII的作用:输入为设计要求(Design Feature),输出为零件特征(Part Characteristic),将设计要求分配到每一个零件特征中去: 本章开始介绍产品结构设计 ...