实现这一效果利用css和js技术结合

以ul->li为例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉</title>
</head>
<body>
<div id="sidebar">
    <ul>
        <li class="submenu">
            <a>首页</a>
            <ul>
                <li><a>首页内容1</a></li>
                <li><a>首页内容2</a></li>
                <li><a>首页内容3</a></li>
            </ul>
        </li>
        <li>
            <a>内容</a>
        </li>
        <li class="submenu">
            <a>新闻</a>
            <ul >
                <li><a>新闻1</a></li>
                <li><a>新闻2</a></li>
                <li><a>新闻3</a></li>
                <li><a>新闻4</a></li>
                <li><a>新闻5</a></li>
            </ul>
        </li>
    </ul>

</div>
</body>
</html>
效果图如下：可以看到默认情况下下层菜单会直接出现。与我们要的效果不一致。

所以首先第一步我们需要将下层菜单先隐藏起来，css样式中用，display：none【此元素不会被显示】样式来隐藏二级菜单。

在页面标签<head></head>中加入

<style>
    .submenu >ul{
        display: none;
    }
</style>
效果图如下：

这样我们就默认显示一级菜单，二级隐藏。

第二步：为了实现点击展开菜单效果，即，点击展开被隐藏的元素。为显示之前隐藏的元素，我们要设置一个open类，然后定义open类的css

再在style标签中继续添加以下代码：

<style>

//.....

.open>ul{
    display: block;//以块元素显示
}

</style>

当前这里我们添加了一个class，在需要展开的那个li的class里添加open类，例如在首页里面添加open类：

<li class="submenu open">
    <a>首页</a>
    <ul>
        <li><a>首页内容1</a></li>
        <li><a>首页内容2</a></li>
        <li><a>首页内容3</a></li>
    </ul>
</li>
效果如下：

第三步：上面是在需要的地方手动添加open类，我们需要的是点击某个链接的时候下拉，这就是js要做的内容了。

　　　　所有很明显js要做的就是当我们需要（点击一下）的时候添加class类=》addClass，不需要（也是点一下）的时候移除class类=》removeClass。

下面是js代码[注意：需要引入jq包]

<script>
    $(function () {
        $('.submenu>a').click(
            function (e) {
                e.preventDefault();//阻止点击a的默认动作
                var li = $(this).parents('li');
                if (li.hasClass('open')){  //假如有open类，移除
                   li.removeClass('open')
                }else{ //否则添加open类
                    li.addClass('open')
                }
            }
        )
    })
</script>
下面给出完成代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>下拉</title>
    <style>
        .submenu >ul{
            display: none;
        }
        .open>ul{
            display: block;
        }
    </style>
</head>
<body>
<div id="sidebar">
    <ul>
        <li class="submenu">
            <a>首页</a>
            <ul>
                <li><a>首页内容1</a></li>
                <li><a>首页内容2</a></li>
                <li><a>首页内容3</a></li>
            </ul>
        </li>
        <li>
            <a>内容</a>
        </li>
        <li class="submenu">
            <a>新闻</a>
            <ul >
                <li><a>新闻1</a></li>
                <li><a>新闻2</a></li>
                <li><a>新闻3</a></li>
                <li><a>新闻4</a></li>
                <li><a>新闻5</a></li>
            </ul>
        </li>
    </ul>

</div>
<script src="js/jquery.min.js"></script>
<script>
    $(function () {
        $('.submenu>a').click(
            function (e) {
                e.preventDefault();//阻止点击a的默认动作
                var li = $(this).parents('li');
                if (li.hasClass('open')){  //假如有open类，移除
                   li.removeClass('open')
                }else{ //否则添加open类
                    li.addClass('open')
                }
            }
        )
    })
</script>
</body>
</html>
这样就能实现点击某个链接出现下拉，再点击下拉消失，在这个效果上还有变形（其实就是做的好看点，加上jq显示隐藏淡入淡出效果等，这个在之后的变形2会给出），
变形1：每次默认打开的时候让某个菜单展现，手动为那个菜单添加open类，不想要的时候就删除对应li标签class中的open类
变形2：见下篇

有序无序ul->li ol->li菜单，默认点击当前弹出下拉，再次点击收起下拉菜单的更多相关文章

  1. [置顶] html学习笔记，锚点，超链接，table布局，表头，h,sub,blockquote,ul,li,ol.dl,加入收藏，打印，弹出窗口

    <a name="shouye"></a> <strong>strong加粗</strong> <br> 没有加粗 &l ...

  2. ul 、ol li 继承原有样式的问题

    如: 1.为什么我的服务器无法远程了? 2.为什么我的服务器总是自动重启? 3.为什么我的服务器总是自动重启? 以前写这种类型的列表,都是自己用键盘输入这些数字,其实不然,ul .ol li本身就自带 ...

  3. 有序无序Ul->Li Ol->Li菜单，默认点击当前弹出下拉，再次点击收起下拉菜单(变形2 ---修饰)

    从上面可以看出,两个问题,第一:下拉出现的太快太突然,第二:再点击下一个下拉菜单的时候,上一个不会闭合,针对这两个问题,接下来会一 一解决. 解决下拉太快: js中有个jquery效果,有一个效果是j ...

  4. JavaScript实现点击按钮弹出输入框，点确定后添加li组件到ul组件里

    JavaScript实现点击按钮弹出输入框,点确定后添加li组件到ul组件里 <!doctype html> <html manifest="lab4.manifest&q ...

  5. 前端 HTML body标签相关内容 常用标签 列表标签 ul，ol,li

    列表标签 ul,ol,li ul.ol.li标签 都属于块级标签,独占一行 网站页面上一些列表相关的内容比如说物品列表.人名列表等等都可以使用列表标签来展示.通常后面跟<li>标签一起用, ...

  6. 通过jquery获得某个元素的位置, 透明div, 弹出框, 然后在旁边显示toggle子级联菜单-hover的bug解决

    jquery的"筛选选择器", 都是用冒号开头的, 即, 冒号选择器就是 筛选选择器.如: :first, :last, :eq(index), :first-child,...等 ...

  7. EditText 默认不获取焦点，弹出软键盘布局变形解决方案

    关于弹出软键盘布局变形解决方案: 在androidMainfest.xml文件中在此Activity中写入 android:windowSoftInputMode="adjustPan&qu ...

  8. 配置Info.plist (设置状态栏样式、自定义定位时系统弹出的提示语、配置3DTouch应用快捷菜单)

    一.概述 iOS中很多功能需要配置Info.plist才能实现,如设置后台运行.支持打开的文件类型.自定义访问隐私内容时弹出的提示等.了解Info.plist中各字段及其含义,可以访问苹果开发网站相关 ...

  9. IOS实现弹出菜单效果MenuViewController(背景 景深 弹出菜单)

    在写项目时,要实现一个从下移上来的一个弹出菜单,并且背景变深的这么一个效果,在此分享给大家. 主要说一下思路及一些核心代码贴出来,要想下载源码, 请到:http://download.csdn.net ...

随机推荐

  1. java 上传大文件以及文件夹

    我们平时经常做的是上传文件,上传文件夹与上传文件类似,但也有一些不同之处,这次做了上传文件夹就记录下以备后用. 这次项目的需求: 支持大文件的上传和续传,要求续传支持所有浏览器,包括ie6,ie7,i ...

  2. python build-in function

    目录(?)[-] absx alliterable anyiterable basestring binx boolx callableobject chri classmethodfunction ...

  3. MySQL的(@i:=@i+1)用处及用法

    今天写一个为查询的数据排序列号的SQL语句,整理出来下面的笔记: 这是语法:   SELECT (@i:=@i+1),t.* FROM table_name t,(SELECT @i:=0) AS j ...

  4. JMS学习九（ActiveMQ的消息持久化到Mysql数据库）

    1.将连接Mysql数据库的jar文件,放到ActiveMQ的lib目录下 2.修改ActiveMQ的conf目录下的active.xml文件,修改数据持久化的方式 2.1  修改原来的kshadb的 ...

  5. [spring jpa] 解决SimpleJpaRepository的多数据源配置问题

    前言 前段时间使用spring jpa做了一个项目,由于涉及到了多个数据库,因此需要进行多数据源的配置.网上找了很多的资料,尝试着配置,都以失败告终.之后通过断点最终完成了多数据源的配置.这篇博客主要 ...

  6. C语言第四次实验报告

    第四次实验报告 一·实验项目名称: 多球反弹 二·实验项目功能描述: (1)实现多个小球 (2)实现多个小球碰壁会反弹 (3)实现小球之间碰撞反弹 三· 项目模块结构介绍 #define High 4 ...

  7. JPagination分页插件的使用（ASP.NET中使用）

    前台代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.asp ...

  8. Gridview中显示的值根据数据库中带出的值作更改

    前台页面对Gridview增加事件 OnRowDataBound="GridView1_RowDataBound"protected void GridView1_RowDataB ...

  9. 使用SharpZIpLib写的压缩解压操作类

    使用SharpZIpLib写的压缩解压操作类,已测试. public class ZipHelper { /// <summary> /// 压缩文件 /// </summary&g ...

  10. Windows系统安装分盘

    按shift + F10 打出dos窗口