实现这一效果利用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. json 转xml

    var jStr = JsonConvert.SerializeObject(new { root = new { li = list } }); var xml = JsonConvert.Dese ...

  2. win7如何设置以管理员身份运行

    一.对所有程序以管理员身份运行 1.右键单击桌面“计算机”,选择“管理” 2.在页面左侧,依此打开“计算机管理(本地)→ 系统工具→本地用户和组→用户”,在右侧找到“Administrator”,双击 ...

  3. CDOJ 1070 秋实大哥打游戏 带权并查集

    链接 F - 秋实大哥打游戏 Time Limit:1000MS     Memory Limit:65535KB     64bit IO Format:%lld & %llu Submit ...

  4. linux文件夹目录含义及用途

    /boot,存放linux启动文件和内核: /initrd,boot loader initialized RAM disk,就是由boot loader初始化的内存盘.在linux内核启动前,boo ...

  5. 分布式架构基石-TCP通信协议

    为什么会有TCP/IP协议 在世界上各地,各种各样的电脑运行着各自不同的操作系统为大家服务,这些电脑在表达同一种信息的时候所使用的方法是千差万别.就好像圣经中上帝打乱了各地人的口音,让他们无法合作一样 ...

  6. 跨平台迁移数据库windows-Linux

    将10.10.1.127服务器的数据库ORCL(WINDOWS)迁移到VM 10.10.10.168LINUX平台 操作系统:Windows server 2008r2 64bit CentOS  L ...

  7. CDH搭建和集成spark、kafka操作

    系统:Centos7 CDH版本:5.14.0 请自己提前安装好:mysql.jdk 并下载好相关依赖(每一台机器) yum -y install chkconfig python bind-util ...

  8. css命名和书写规范

    前言 在项目开发中对于css名字的命名和书写老是感觉很混乱,这对于代码的可读性以及维护提出了挑战,所以在闲暇之余看了一些这方面的内容,现总结如下... 1.命名规则说明 所有的命名最好都小写 属性的值 ...

  9. multiple users to one ec2 instance setup

    http://docs.aws.amazon.com/AWSEC2/latest/UserGuide/managing-users.html usually when use pem file as ...

  10. laravel Route::resource() 资源路由

    格式: Route::resource('/order', 'OrderController', ['as' => 'admin']); 框架自动创建路由及其对应控制器中的方法: 请求方式 路由 ...