<!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. [ SCOI 2008 ] 着色方案

    \(\\\) \(Description\) 给出\(K\)种颜料各自的个数\(C_i\),每一个颜料只够涂一个格子,求将颜料用完,涂一排格子,每个格子只能涂一次的条件下,相邻两个格子的颜色互不相同的 ...

  2. Android项目实战_手机安全卫士home界面

    # 安全卫士主页面# ###1.GridView控件 1.与ListView的使用方式差不多,也要使用数据适配器,通过设置android:numColumns控制显示几列 2.通过指定android: ...

  3. HTTP05--HTML常用知识

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

  4. html5——css选择器

    复习 div>p: 子代 div+p:div后面相邻的第一个p div~p: div后面所有的兄弟p 属性选择器 标志:[]:区别于id选择器:#,区别于类名选择器:. 特殊符号:^:开头    ...

  5. [Windows Server 2008] 安装SQL SERVER 2008

    ★ 欢迎来到[护卫神·V课堂],网站地址:http://v.huweishen.com★ 护卫神·V课堂 是护卫神旗下专业提供服务器教学视频的网站,每周更新视频.★ 本节我们将带领大家:安装SQL S ...

  6. ajax不执行success的问题

    有时候经常会遇到ajax请求后台,然后后台返回数据后,不触发ajax的success函数的问题,归根到底,这与ajax的参数设置dataType和后台的返回值的类型有关,现总结如下: 一.后台返回值的 ...

  7. C# 定时无操作则退出登陆，回到登陆界面。

    有时候根据需求需要为程序添加在规定的时间内无操作则退出当前的登陆程序的功能,如下代码模拟描述的需求功能. using System; using System.Collections.Generic; ...

  8. java基本类型和包装类型的区别以及object的公共方法

    Java的类型分为两部分,一个是基本类型(primitive),如int.double等八种基本数据类型: 一.基本数据类型: byte:Java中最小的数据类型,在内存中占8位(bit),即1个字节 ...

  9. 详解proxy_pass、upstream与resolver

    详解proxy_pass.upstream与resolver boldcautious 关注 2018.06.04 10:48 字数 1204 阅读 1434评论 0喜欢 2 应用场景 这里列举几个应 ...

  10. Vue动态组件&异步组件

    在动态组件上使用keep-alive 我们之前曾经在一个多标签的界面中使用is特性来切换不同的组件: Vue.js的动态组件模板 <component v-bind:is="curre ...