<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>制作子菜单</title>

    <script type="text/javascript" src="./js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript">

        $(function(){

            $("h2").click(function(){

                $(this).next("ul").css("display","block").addClass("nav");

                $($("li")[0]).css("background-color","#ccc");

            });

        })

    </script>

    <style type="text/css">

        .nav li{

            font-size:14px;

            font-weight:bold;

            line-height: 24px;

        }

    </style>

</head>

<body>

<h2>新手指南</h2>

<ul style='display:none'>

    <li><a href="#">会员注册</a></li>

    <li><a href="#">订阅更新</a></li>

    <li><a href="#">用户协议</a></li>

    <li><a href="#">常见问题</a></li>

</ul>

</body>

</html>

制作点击显示二级菜单效果.html

jQuery - 制作点击显示二级菜单效果的更多相关文章

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

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

  2. jQuery制作右侧边垂直二级导航菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jquery制作弹出层带遮罩效果，点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  4. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. js点击出现二级菜单，点击二级菜单主菜单换成二级菜单

    点击出现二级菜单 *{ margin:0px auto; padding:0px; } .yiji{ width:200px; height:40px; background-color:red; c ...

  6. 鼠标经过显示二级菜单的js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  7. 基于jquery鼠标点击图片翻开切换效果

    基于jquery鼠标点击图片翻开切换效果是一款基于jQuery+CSS3实现的点击图片切换特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&quo ...

  8. Selenium操作示例——鼠标悬停显示二级菜单，再点击二级菜单或下拉列表

    这两天在玩python中selenium,遇到一个问题,就是鼠标移动到页面中某按钮或菜单,自动弹出二级菜单或下拉菜单,再自动点击其中的二级菜单或下拉列表. 首先,手工操作:打开母校的主页 http:/ ...

  9. jquery垂直展开折叠手风琴二级菜单

    摘要:jquery实现垂直展开二级菜单 最近新开发一个简单项目,用到左侧两级的菜单.找找了手头的文件,竟然没有现成的代码,算了,去网上找找整理下吧. 注:jquery-1.8.3.min.js需要下载 ...

随机推荐

  1. javascript特殊值常量

    Infinity 表示无穷大的特殊值.当数字运算结果超出javascript能表示的数字范围时. Nan 特殊的非数字值(not a number).0除0.数字运算符的操作数为字符等情况. Numb ...

  2. python框架之Flask基础篇（四）-------- 其他操作

    1.蓝图 要用蓝图管理项目,需要导入的包是:from flask import Buleprint 具体大致分为三步: 1.先在子模块中导入蓝图包,然后再创建蓝图对象. 2.然后将子模块中的视图函数存 ...

  3. BAT文件如何注释

    1.BAT文件中如何注释: 1.:: 注释内容(第一个冒号后也可以跟任何一个非字母数字的字符) 2.rem 注释内容(不能出现重定向符号和管道符号) 3.echo 注释内容(不能出现重定向符号和管道符 ...

  4. 转载：使用FileReader对象的readAsDataURL方法来读取图像文件

    文章转载自:http://blog.okbase.net/jquery2000/archive/1296.html: FileReader对象的readAsDataURL方法可以将读取到的文件编码成D ...

  5. TriAquae 是一款由国产的基于Python开发的开源批量部署管理工具

    怀着鸡动的心情跟大家介绍一款国产开源运维软件TriAquae,轻松帮你搞定大部分运维工作!TriAquae 是一款由国产的基于Python开发的开源批量部署管理工具,可以允许用户通过一台控制端管理上千 ...

  6. 从CSDN转到cnblogs了

    之前一直用的CSDN的博客,网站卡慢经常出问题,发布文章要审核,连修改几个标点符号也要审核,这些我都忍了,毕竟之前发的文章舍不得弃掉. 现在竟然无故封禁我的博客?请问我写的都是技术文章,有哪点违反规定 ...

  7. transform: scale(x,y)

    作用: 1)缩放 2)反转 水平翻转:transform: scale(-1,1); 垂直翻转:transform: scale(1,-1); 水平垂直翻转: transform: scale(-1, ...

  8. php第十三节课

    查询 <?php class DBDA{ public $host = "localhost"; //数据库地址 public $uid = "root" ...

  9. 安装RHEL7红帽操作系统

    1.单击“开启此虚拟机”启动RHEL 7系统安装. 开启虚拟机 2.通过键盘方向键选择Install Red Hat Enterprise Linux 7.0选项,然后回车,开始安装RHEL7操作系统 ...

  10. 50.percentiles百分比算法以及网站延时统计

    主要知识点 percentiles的用法     现有一个需求:比如有一个网站,记录下了每次请求的访问的耗时,需要统计tp50,tp90,tp99 tp50:50%的请求的耗时最长在多长时间 tp90 ...