实现这一效果利用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. ThoughtWorks.QRCode 生成二维码名片（实现二维码内容换行）

    最近在写一个很简单的功能,按照Vcard的格式,生成二维码名片.本来以为分分钟完事的事情,替换数据,直接调用dll去生成二维码. 测试时,发现生成的二维码使用微信扫描得到的名片信息为空,反向解析发现, ...

  2. 查看 XML 文件

    在所有现代浏览器中,均能够查看原始的 XML 文件. 不要指望 XML 文件会直接显示为 HTML 页面. 查看 XML 文件 查看这个 XML 文件:note.xml 打开 XML 文件 - XML ...

  3. SQL基础测试

    SQL 测验 结果:20/20 您的回答: 1.SQL 指的是? 您的回答:Structured Query Language 2.哪个 SQL 语句用于从数据库中提取数据? 您的回答:SELECT ...

  4. 大哥带的MSsql注入（SQL Server）--预习

    ①判断数据库类型and exists (select * from sysobjects)--返回正常为mssql(也名sql server)and exists (select count(*) f ...

  5. git强行覆盖master分支

    目录 我遇到的场景 需要注意的预备操作 操作步骤 我遇到的场景 1.master分支只为护较早的版本 2.由于业务不稳定,新业务和功能都在dev 分支上,dev的开发周期很长,一直变更迭代 3.从de ...

  6. 你是一直认为 count(1) 比 count(*) 效率高么？

    MySQL count(1) 真的比 count(*) 快么? 反正同事们都是这么说的,我也姑且觉得对吧,那么没有自己研究一下究竟?如果我告诉你他们一样,你信么? 有 Where 条件的 count, ...

  7. Linux NTP服务器的搭建及client自动更新时间

    Network Time Protocol(NTP)是用来使计算机时间同步化的一种协议,它可以使计算机对其服务器或时钟源(如石英钟,GPS等等)做同步化,它可以提供高精准度的时间校正(LAN上与标准间 ...

  8. office toolkit怎么用（以激活office professional 2013为例）

    第一步:双击打开office toolkit工具,并选择office按钮(激活windows10选择windows按钮) 第二步:选择相应的office版本,我电脑安装的是Microsoft Offi ...

  9. 四：flask-URL两种传参方式（路径传参和get传参）

    新建一个视图 第一种:路径传参:url/参数:<参数名>,然后再视图函数中接收参数 也可以指定数据类型 string:默认使用此数据类型,接收没有任何斜杠"\/"的文本 ...

  10. C—LINQ小结

    LINQ代表语言集成查询(Language-Integrated Query),它包括用于从数据源检索信息的一组功能.数据检索是许多程序的重要组成功能. 简介:System.Linq; var num ...