实现这一效果利用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. form表单细节

    一.表单 表单<form> 标签用于为用户输入创建 HTML 表单 表单能够包含 input 元素,比如文本字段.复选框.单选框.提交按钮等等. 表单还可以包含 menus.textare ...

  2. MySQL 运维管理平台

    github: https://github.com/XiaohaoYu/mysql_platform

  3. Python抽象类（abc模块）

    1.抽象类概念 抽象类是一个特殊的类,只能被继承,不能实例化 2.为什么要有抽象类 其实在未接触抽象类概念时,我们可以构造香蕉.苹果.梨之类的类,然后让它们继承水果这个基类,水果的基类包含一个eat函 ...

  4. CF191C Fools and Roads - 树剖解法

    Codeforces Round #121 (Div. 1) C. Fools and Roads time limit per test :2 seconds memory limit per te ...

  5. pycharm问题集锦

    1.pycharm的激活方式 参考博客https://blog.csdn.net/u014044812/article/details/78727496 2.总是出现波浪线,如下问题 问题原因:knn ...

  6. ArrayList，Vector ，LinkedList的存储性能和特性

    ArrayList,Vector,LinkedList : 两者都采用数组元素方式存储数据,此数组元素数大于实际存储的数据(以便于增加和插入元素),允许直接按照序号索引元素,但是插入元素涉及数组元素移 ...

  7. Redis大key的发现与删除方法全解析

    个推作为国内第三方推送市场的早期进入者,专注于为开发者提供高效稳定的推送服务,经过9年的积累和发展,服务了包括新浪.滴滴在内的数十万APP.由于我们推送业务对并发量.速度要求很高,为此,我们选择了高性 ...

  8. HDU6623 思维题（n分解成质因子的形式，问最小的幂是多少）

    题目大意:给你一个数n,把它分解为素数的幂次的乘积的形式:n=p1^e1 * p2^e2 * .......pk^ek  求最小的幂次是多少 n=le18 分析: 首先我们肯定是不可以枚举1e18的因 ...

  9. mysql根据身份证查询年龄，地址，性别

    elect  case left(idcard,2)  when '11' then '北京市' when '12' then '天津市' when '13' then '河北省' when '14' ...

  10. 在docker容器中调用docker命令

    宿主容器均为CentOS7.6.1810 docker run -it --rm \ -v /usr/bin/docker:/usr/bin/docker \ -v /var/run/docker.s ...