<!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. HTTP05--HTML常用知识

    一.URL地址含义 需要搞清URL和URI的差别,以及QueryString的含义. 二.GET和POST的区别 详细介绍可参考文章:http://zengrong.net/post/1802.htm ...

  2. Storm 入门一：基本知识+网上资源链接

    Strom首页:http://storm.apache.org/ 下载地址:http://www.apache.org/dyn/closer.lua/storm/apache-storm-1.1.0/ ...

  3. vue iView 打包后 字体图标不显示

    问题描述: 今天webpack打包后发现iView 字体图标不显示 解决方案: build/webpack.prod.conf.js 这个文件里面 module: { rules: utils.sty ...

  4. 在PHP中调用php_ssh实现远程登陆linux服务器并执行shell脚本。

    这个功能主要用于在web端利用程序对远程服务器进行操作,通过PHP_ssh执行shell脚本来实现. 首先要安装php_ssh2组件,linux中centos7下有ssh2源,直接安装.window下 ...

  5. FTP工作原理

    FTP工作原理 FTP两种传输方式:1.ASCII传输2.二进制传输 FTP主被动原理: 主动方式:1.用户与服务器建立控制通道2.客户端发出PORT指令,主动告诉服务器端口号3.服务器主动通过20端 ...

  6. ubuntu_linux /boot/grub/grub.conf

    ==========================================UBUNTU  /boot/grub/grub.conf文件============================ ...

  7. BFOA

    #include <stdio.h> #include <stdlib.h> #include <string.h> #include <time.h> ...

  8. hdu2014 青年歌手大奖赛_评委会打分【C++】

    青年歌手大奖赛_评委会打分 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  9. 【codeforces 509A】Maximum in Table

    [题目链接]:http://codeforces.com/contest/509/problem/A [题意] 给你一个递推式f[i][j] = f[i-1][j]+f[i][j-1]; 让你求f[i ...

  10. windows下db2的一些使用心得(不含安装)

    1.安装完成后开始菜单栏里会有一个 DB2 Command Window - Administrator 打开这个命令窗口 2.db2 db2,启动 3.list databse directory ...