原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

　　用javascript实现简单的下拉折叠菜单效果

实现步骤

　　（a）获得各操作的dom对象；

　　（b）在所有菜单按钮对象上添加单击事件；

　　（c）设置所有菜单按钮样式为空，并将当前按钮的样式设置为“active”；同时设置div1下面的所有div元素的display为none，并将当前按钮所对应的div的display为block

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Gary_js实现简单的下拉折叠菜单</title>

<style>

* {margin:0px; padding:0px;}

#div1 {width:200px; margin: auto; line-height:25px;}

ul {list-style:none;}

li {background:#ccc;margin-bottom:3px;}

dl {background:#eee; display:none;}

.active {background:#F90;}

</style>

<script>

//此处编写js代码，实现简单的下拉折叠菜单，默认菜单1是展开的

</script>

</head>

<body>

<div id="div1">

    <ul id="menu">

        <li class="active">菜单1</li>

            <dl style="display:block;">

                <dd>菜单1.</dd>

                <dd>菜单1.</dd>

                <dd>菜单1.</dd>

                <dd>菜单1.</dd>

            </dl>

        <li>菜单2</li>

            <dl>

                <dd>菜单2.</dd>

                <dd>菜单2.</dd>

                <dd>菜单2.</dd>

                <dd>菜单2.</dd>

            </dl>

        <li>菜单3</li>

            <dl>

                <dd>菜单3.</dd>

                <dd>菜单3.</dd>

                <dd>菜单3.</dd>

                <dd>菜单3.</dd>

            </dl>

    </ul>

</div>

</body>

</html>

效果一

　　点击一级菜单时弹出二级子菜单，不需要对菜单进行 display==“none”?true:false 判断(缺点：无法把三个一级菜单状态都设置为"display")

    window.onload = function () {

        var lis = document.getElementsByTagName('li');

        var dls = document.getElementsByTagName('dl');

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

            lis[i].index = i;

            lis[i].onclick = function () {

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

                lis[i].className ='';

                dls[i].style.display = 'none';

                }

                this.className = 'active';

                dls[this.index].style.display = 'block';

            }

        }

    }

Gary.Script

效果二

　　点击一级菜单弹时进行display==“none”?true:false 使二级菜单实现点击收缩功能

<script>

//此处编写js代码，实现简单的下拉折叠菜单，默认菜单1是展开的

    window.onload = function () {

        var lis = document.getElementsByTagName('li');

        var dls = document.getElementsByTagName('dl');

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

            lis[i].index = i;

            lis[i].onclick = function () {

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

                lis[i].className ='';

                }

                this.className = 'active';

                if(dls[this.index].style.display == 'block')

                    dls[this.index].style.display = 'none'

                else

                    dls[this.index].style.display = 'block'

            }

        }

    }

</script>

Gary.Script

效果三

　　　通过animate.css 添加实现二级子菜单动画展开动画

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>Gary_js实现简单的下拉折叠菜单</title>

<style>

* {margin:0px; padding:0px;}

#div1 {width:200px; margin:0 auto; line-height:25px;}

ul {list-style:none;}

li {background:#ccc;margin-bottom:3px;}

dl {background:#eee;display:none;

            transform-origin:50% 0;

            -webkit-animation:gary .5s ease-in;

            transition: all .3s infinite;}

.active {background:#F90;}

@-webkit-keyframes gary{

                                0%{transform:scale(1,0);}

                                25%{transform:scale(1,1.2);}

                                50%{transform:scale(1,0.85);}

                                75%{transform:scale(1,1.05);}

                                100%{transform:scale(1,1);}

                            }

</style>

<script>

//此处编写js代码，实现简单的下拉折叠菜单，默认菜单1是展开的

    window.onload = function () {

        var lis = document.getElementsByTagName('li');

        var dls = document.getElementsByTagName('dl');

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

            lis[i].index = i;

            lis[i].onclick = function () {

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

                lis[i].className ='';

                }

                this.className = 'active';

                if(dls[this.index].style.display == 'block')

                    dls[this.index].style.display = 'none'

                else

                    dls[this.index].style.display = 'block'

            }

        }

    }

</script>

</head>

<body>

<div id="div1">

    <ul id="menu">

        <li class="active">菜单1</li>

            <dl style="display:block;">

                <dd>菜单1.1</dd>

                <dd>菜单1.2</dd>

                <dd>菜单1.3</dd>

                <dd>菜单1.4</dd>

            </dl>

        <li>菜单2</li>

            <dl>

                <dd>菜单2.1</dd>

                <dd>菜单2.2</dd>

                <dd>菜单2.3</dd>

                <dd>菜单2.4</dd>

            </dl>

        <li>菜单3</li>

            <dl>

                <dd>菜单3.1</dd>

                <dd>菜单3.2</dd>

                <dd>菜单3.3</dd>

                <dd>菜单3.4</dd>

            </dl>

    </ul>

</div>

</body>

</html>

Gary.Html

动画实现原理

@keyframes创建动画　　传送门

　　创建动画是通过逐步改变从一个CSS样式设定到另一个。

　　在动画过程中，您可以更改CSS样式的设定多次。

　　指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
　　0％是开头动画，100％是当动画完成。
　　为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。

transform-origin 属性：改变被转换元素的位置　　传送门

transform-origin: x-axis y-axis z-axis;

animation 属性：将动画与 div 元素绑定　　传送门

animation: name duration timing-function delay iteration-count direction;

transition-timing-function 属性　　传送门

transition-timing-function: linear|ease|ease-in|ease-out|ease-in-out|cubic-

bezier(n,n,n,n);

linear	规定以相同速度开始至结束的过渡效果（等于 cubic-bezier(0,0,1,1)）。
ease	规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。
ease-in	规定以慢速开始的过渡效果（等于 cubic-bezier(0.42,0,1,1)）。
ease-out	规定以慢速结束的过渡效果（等于 cubic-bezier(0,0,0.58,1)）。
ease-in-out	规定以慢速开始和结束的过渡效果（等于 cubic-bezier(0.42,0,0.58,1)）。
cubic-bezier(n,n,n,n)	在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。

==================================分割线

　　H5页面运行时使用console.log()在控制台查看点击标签下标

<script>

//此处编写js代码，实现简单的下拉折叠菜单，默认菜单1是展开的

    window.onload = function () {

        var lis = document.getElementsByTagName('li');

        var dls = document.getElementsByTagName('dl');

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

            lis[i].index = i;

            lis[i].onclick = function () {

                //清空所有的样式

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

                lis[i].className ='';

                }

                this.className = 'active';

                if(dls[this.index].style.display == 'block')

                    dls[this.index].style.display = 'none'

                else

                    dls[this.index].style.display = 'block'

                    console.log(this.index)

                    console.log(i)

            }

        }

    }

</script>

　　可以看到，若果不使用lis[i].index = i去得到元素下标，那么i会不断指向数组元素最大值的下一个值！！！

    //贪心的想在控制台上获得更多的信息

    console.log(dls[this.index])

原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)的更多相关文章

在 jQuery 中使用滑入滑出动画效果，实现二级下拉导航菜单的显示与隐藏效果
查看本章节查看作业目录需求说明: 在 jQuery 中使用滑入滑出动画效果,实现二级下拉导航菜单的显示与隐藏效果用户将光标移动到"最新动态页"或"帮助查询" ...
原生js实现简单的下拉刷新功能
前言: 我们在浏览移动端web页面的时候,经常会用到下拉刷新. 现在我们用原生的js实现这个非常简单的下拉刷新功能. (温馨提示:本文比较基础,功能也很简单.写的不好的地方,希望大神提点一二.) 一. ...
ALV屏幕捕捉回车及下拉框事件&ALV弹出框回车及下拉框事件
示例展示: 屏幕依据输入的物料编码或下拉框物料编码拍回车自动带出物料描述: 点击弹出框,输入物料编码拍回车带出物料描述,点击确认,更新ALV: 1.创建屏幕9000,用于处理ALV弹出框: 2.针对屏 ...
原生js实现简单的下拉加载
#获取当前滚动条的高度document.documentElement.scrollTop #获取当前窗口的高度 document.documentElement.clientHeight #获取当前 ...
Javascript实现简单的下拉二级菜单
在线演示;http://jsfiddle.net/Web_Code/ThhbG/embedded/result/ <span style="font-size:14px;"& ...
CSS3 3D下拉折叠菜单
在线演示本地下载
JQuery -> 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
Example017简单的下拉框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
在AJAX里使用【 XML 】返回数据类型实现简单的下拉菜单数据
在AJAX里使用XML返回数据类型实现简单的下拉菜单数据 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN ...

随机推荐

使用Keras基于AdvancedEAST的场景图像文本检测
Blog:https://blog.csdn.net/linchuhai/article/details/84677249 GitHub:https://github.com/huoyijie/Adv ...
Codeforces 1178C. Tiles
传送门考虑一块块填,首先 $(1,1)$ 有 $4$ 种方案然后根据 $(1,1)$ 的右边颜色,$(1,2)$ 有两种方案,$(1,3)$ 根据 $(1,2)$ 也有两种方案... 考虑 $(2 ...
deepin 15.10.1 GTX1060 NVIDIA 驱动安装，双屏显示问题记录
有一段时间没有用Linux了.由于买了个4k的戴尔显示屏,在deepin系统上无法用,从昨晚到现在,总于解决了我的问题! 问题1:无法直接在深度的显卡驱动管理器哪里直接切换,网上看到很多人都有这个问题 ...
DataX操作指南
1.DataX介绍 DataX DataX 是阿里巴巴集团内被广泛使用的离线数据同步工具/平台,实现包括 MySQL.Oracle.SqlServer.Postgre.HDFS.Hive.ADS.HB ...
异常-throw的概述以及和throws的区别
package cn.itcast_06; /* * throw:如果出现了异常情况,我们可以把该异常抛出,这个时候的抛出的应该是异常的对象. * * throws和throw的区别(面试题) thr ...
SQL数据库字段数据类型详细说明
这里先总结数据类型.MySQL中的数据类型大的方面来分,可以分为:日期和时间.数值,以及字符串.下面就分开来进行总结. 日期和时间数据类型 MySQL数据类型含义 date 3字节,日期,格式:20 ...
应对Hadoop集群数据疯长，这里祭出了4个治理对策！
一.背景在目前规模比较大的互联网公司中,总数据量能达到10PB甚至几十PB数据量的公司,我认为中国已经有超过了20家了.而在这些公司中,也有很多家公司的日数据增长达到100TB+ 了. 所以我们每 ...
python多线程之_thread
多线程类似于同时执行多个不同程序,多线程运行有如下优点: 使用线程可以把占据长时间的程序中的任务放到后台去处理. 用户界面可以更加吸引人,这样比如用户点击了一个按钮去触发某些事件的处理,可以弹出一个进 ...
工具安装——linux下安装JDK1.8
1.查看Linux环境自带JDK 使用命令:# rpm -qa|grep gcj 显示内容其中包含相应信息# java-x.x.x-gcj-compat-x.x.x.x-xxjpp# java-x.x ...
oracle 环境变量问题
ORACLE_HOME 配置为oracle ..\dbhome_1 配置错误可能导致监听起不来 (也有可能是在装client时可能会更改了之前变量的值) TNS_ADMIN ...

原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)

原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)的更多相关文章

随机推荐

热门专题