<!DOCTYPE html>

<html>

<head>

    <title>Dropdown</title>

    <!--<link rel="stylesheet" href="style.css">-->

    <!--<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>-->

    <!--<script src="js/jquery.min.js"></script>-->

    <meta charset="utf-8" />

    <style type="text/css">

        body {

            font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

        }

        ul {

            list-style-type: none;

            margin: 0;

            padding: 0;

            overflow: hidden;

            background-color: #333;

        }

        li {

            float: left;

        }

        li a, .dropbtn {

            display: inline-block;

            color: white;

            text-align: center;

            padding: 14px 16px;

            text-decoration: none;

        }

        li a:hover, .dropdown:hover .dropbtn {

            background-color: #1f75cf;

        }

        li.dropdown {

            display: inline-block;

        }

        .dropdown-content {

            display: none;

            position: absolute;

            background-color: #fafafa;

            min-width: 160px;

            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);

        }

        .dropdown-content a {

            color: black;

            padding: 12px 16px;

            text-decoration: none;

            display: block;

            text-align: left;

        }

        .dropdown-content a:hover {

            color: white;

            background-color: #1f75cf;

        }

        .show {

            display: block;

        }

    </style>

</head>

<body>

<ul>

    <li class="dropdown">

        <a id="a" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 A</a>

        <div class="dropdown-content" id="dropdown-a">

            <a href="#">下拉 1</a>

            <a href="#">下拉 2</a>

            <a href="#">下拉 3</a>

        </div>

    </li>

    <li class="dropdown">

        <a id="b" href="javascript:void(0)" class="dropbtn" onclick="showList(this)">标题 B</a>

        <div class="dropdown-content" id="dropdown-b">

            <a href="#">下拉 1</a>

            <a href="#">下拉 2</a>

            <a href="#">下拉 3</a>

        </div>

    </li>

</ul>

<script type="text/javascript">

    function showList(o) {

        //1.把其他的二级ul都隐藏，

//        hideList("dropdown-content" + o.id);

        //把其他的二级ul隐藏方式1

        hideList("dropdown-" + o.id);

        //把其他的二级ul隐藏方式2

//        hideList('');

        //2.再切换自己的show。

//        document.getElementById("dropdown-" + o.id).classList.toggle("show");

        var drop = document.getElementById("dropdown-" + o.id);

        if (drop.classList.contains('show')) {

            drop.classList.remove('show');

//            alert("yichu");

        }else{

            drop.classList.add('show');

//            alert("xianshi");

        }

    }

    //隐藏不是自己对应的下拉div。

    function hideList(option) {

        var dropdowns = document.getElementsByClassName("dropdown-content");

        for (var i = 0; i < dropdowns.length; i++) {

            var openDropdown = dropdowns[i];

            if (openDropdown.id != option) {

                if (openDropdown.classList.contains('show')) {

                    openDropdown.classList.remove('show');

                }

            }

        }

    }

    window.onclick = function(e) {

        if (!e.target.matches('.dropbtn')) {

            hideList("");

        }

    }

</script>

</body>

</html>

实现效果

这里要实现的效果是，点击id为a的元素弹出dropdown-a的div元素，点击id为b的元素弹出dropdown-b的div元素。

实现思路  （showList方法的实现过程）

注意事项：这里有个设计点，每一个弹出的下拉div（有dropdown-*类的div）同时有id和class。class是为了方便使用for循环对他们操作，比如这里将他们进行隐藏。第二个是为了写css，每个下拉列表的css都是一样的。

1.思路是使用js，获得所有的有dropdown-content类的元素。

2.第二步有2种做法，如果没有强迫症的话就随便选一种就可以了。个人比较喜欢第二种。强迫症对于这2种如果不是很明白的话，可以使用上面的注释调的alert函数调试一下。选择第一种hidelist（“”），你会发现在执行第3步之前，所对应的dropdown-content永远是隐藏的，由隐藏切换到显示。所以你点击的时候，永远都是alert显示。这就是这2种做法的区别。

　　2-1.先把所有的弹出层（dropdown-content）隐藏。函数hideList('');

　　2-2.第二种就是，判断是否是点击的a链接所对应的那个dropdown-content，其余的全部隐藏。函数hideList("dropdown-" + o.id);

3.最后一步就是使用toggle方法切换所对应dropdown-content元素的显示或隐藏状态。

4.还有一个就是当下拉菜单展开的时候，点击窗体其他地方会把它隐藏的效果。跟模态框是一样的。代码在最后那几行。

这里举个不生动的例子，假如是动物园的个体表演。有猴子，狮子，灰熊...，每次出来一个表演。便于理解showlist（“”）方法。这里举例的第二步是hidelist（“”）函数；

1.表演还没开始，就先全部关起来。（全部隐藏起来）

2.然后点名，让猴子表演。就把猴子的笼子打开。猴子就被大家看到了。（显示猴子）

3.然后点名让狮子表演。（又一次的点击事件）

4.全部隐藏

5.展示狮子

以此循环。。。

js 导航栏多项点击显示下拉菜单代码的更多相关文章

  1. js （单个的）点击式下拉菜单

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

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

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

  3. Bootstrap学习笔记（5）--实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单

    实现Bootstrap导航条可点击和鼠标悬停显示下拉菜单 微笑的鱼 2014-01-03 Bootstrap 5,281 次围观 11条评论 使用Bootstrap导航条组件时,如果你的导航条带有下拉 ...

  4. lightinthebox头部分类菜单下拉导航，使鼠标移到See All Categories就显示下拉菜单

    lightinthebox头部分类菜单下拉导航,使鼠标移到See All Categories就显示下拉菜单 打开includes\templates\lightinthebox\common\tpl ...

  5. 可控制导航下拉方向的jQuery下拉菜单代码

    效果:http://hovertree.com/texiao/nav/1/ 代码如下: <!DOCTYPE html> <html> <head> <meta ...

  6. bootstrap 导航栏鼠标悬停显示下拉菜单

    在jsp中加入一下代码: .navbar .nav > li:hover .dropdown-menu { display: block;} 全部代码如下所示: <%@ page lang ...

  7. 有序无序ul->li ol->li菜单，默认点击当前弹出下拉，再次点击收起下拉菜单

    实现这一效果利用css和js技术结合 以ul->li为例子 <!DOCTYPE html><html lang="en"><head> & ...

  8. Extjs grid禁用头部点击三角下拉菜单

    表格头部的三角在点击的时候禁止出现下拉菜单,给每一列添加属性menuDisabled:true xtype:'grid', enableColumnResize:false, columns:[ {t ...

  9. js 点击按钮显示下拉菜单

    <li> <a id = "rank" onclick="showGroup()"></a></li><l ...

随机推荐

  1. 程序员offer沟通的4个基本原则

     常柱 架构未来  你需要就一份新工作进行沟通时:比如你的薪水.福利,或者我个人最喜欢的每周工作时间缩短等,当公司问你“你想要多少?”或者“这是我们的报价,你说呢?” 最后关于薪资的谈话可能是最伤脑筋 ...

  2. leaflet 结合 geoserver 实现地图属性查询(附源码下载)

    前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...

  3. Win32 API编程——前言

    一丶什么是Win32 API? 微软为了保护操作系统的安全性和稳定性,把系统分为内核层和用户层(内核层的代码只能在当CPU的特权级为R0状态下执行,用户层的代码在CPU特权级为R0和R3都能执行),w ...

  4. JavaScript-作用域与作用域链

    一.JavaScript作用域:    1.就是代码名字(变量)在某个范围内起作用和效果,目的是为了提高程序的可靠性更重要是减少命名冲突. 2.js的作用域(es6)之前,分为全局作用域.局部作用域 ...

  5. 15. Go 语言“避坑”与技巧

    Go 语言"避坑"与技巧 任何编程语言都不是完美的,Go 语言也是如此.Go 语言的某些特性在使用时如果不注意,也会造成一些错误,我们习惯上将这些造成错误的设计称为"坑& ...

  6. javascript学习总结之函数

    前言 在学习javascript函数的时候,有几个经常很容易混淆的方法,call,apply,bind,caller,callee,这些方法的使用,这些也可以说是会频繁使用的一些方法,在此通过查阅相关 ...

  7. 【转载】Docker registry仓库历史镜像批量清理

    前言 在jenkins CI/CD流水线中以自动打包并push镜像的方式运行了一段时间之后, docker registry中堆积的历史镜像数量极多,磁盘空间告急,为此,有必要定期做镜像的清理,并释放 ...

  8. 红黑树原理详解及golang实现

    目录 红黑树原理详解及golang实现 二叉查找树 性质 红黑树 性质 operation 红黑树的插入 golang实现 类型定义 leftRotate RightRotate Item Inter ...

  9. ABAP分享四 选择屏幕下拉菜单简单实现示例

    PARAMETERS p_carri2 LIKE spfli-carrid                    AS LISTBOX VISIBLE LENGTH 20                ...

  10. 团队项目之Scrum6

    小组:BLACK PANDA 时间:2019.11.26 每天举行站立式会议 提供当天站立式会议照片一张 2 昨天已完成的工作 2 编辑功能优化 实现主页内容展示 今天计划完成的工作 2 内容展示 根 ...