实现这一效果利用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. Nginx做反向代理时访问端口被自动去除

    使用的Nginx版本 : nginx/1.13.10 出现问题的配置文件如下 upstream http-web { server 0.0.0.0:9000; } server { listen 80 ...

  2. Send Email

    private string SendEmail(string mailTo, string body, ref int sendresult) { string errorEmailAddress ...

  3. #420 Div2 Problem B Okabe and Banana Trees (math && 暴力枚举)

    题目链接 :http://codeforces.com/contest/821/problem/B 题意 :给出 m 和 b 表示在坐标轴上的一条直线  要求你在这条直线和x.y轴围成的区域中找出一个 ...

  4. 【python 应用之四】提升 Python 运行性能的 7 个习惯

    大家都知道艺赛旗的 RPA 依赖于 python 语言.因此我们可以掌握一些技巧,可尽量提高 Python 程序性能,也可以避免不必要的资源浪费.1.使用局部变量 尽量使用局部变量代替全局变量:便于维 ...

  5. Android如何安装系统应用，及自己增加安装系统应用的接口

    根据SIM卡安装系统应用 功能: 1:如何安装系统应用,apk放在system/app系统分区下面. 2:根据SIM卡的归属国家选择性的安装应用. 一:本人使用方法: 在开机的服务里面添加接口(Pac ...

  6. QT 信号槽 异步事件驱动 单线程 多并发

    利用好Qt 模块的异步信号槽,单线程同样可是实现很强悍的的并发能力.应付正常的功能是足够的. 需要注意的是:该模式本质上为 单线程 事件驱动异步模式,所以需要做的事优化你的业务代码构架以应付性能与并发 ...

  7. [BZOJ4011][HNOI2015]落忆枫音：拓扑排序+容斥原理

    分析 又是一个有故事的题目背景.作为玩过原作的人,看题目背景都快看哭了ToT.强烈安利本境系列,话说SP-time的新作要咕到什么时候啊. 好像扯远了嘛不管了. 一句话题意就是求一个DAG再加上一条有 ...

  8. sql语句的使用经验 postgresql

    查找指定字段为空或不为空 查询数据库中指定字段为空的行数据: select * from tablename where columnName = '';  字符串类型可以用 '' ,也可以用Null ...

  9. sqli-labs(30)

    0X01 观摩源码 和29关没区别 只是这里闭合变成了“ 0X02构造语句 爆库名 ?id=&id=-"union select 1,database(),3%23 0X03组合拳打 ...

  10. 微服务SpringCloud系列

    https://my.oschina.net/hmilyylimh?tab=newest&catalogId=5703366