目标效果：点击标签1，如果列表标签的style的display是block,改成none，否则改成block，来达到展开收缩菜单效果

一.准备阶段

html文件

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div id="box">

         <p id="btn">标签1</p>

         <ul id="ull" style="display: block;">

             <li><a href="#">手写</a></li>

             <li><a href="#">拼音</a></li>

         </ul>

     </div>

 </body>

 </html>

运行后页面效果

二.：点击标签1隐藏列表

方法1

html代码

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div id="box">

         <p id="btn" onclick="document.getElementById('ull').style.display='none'">标签1</p>

         <ul id="ull" style="display: block;">

             <li><a href="#">手写</a></li>

             <li><a href="#">拼音</a></li>

         </ul>

     </div>

 </body>

 </html>

效果从上图到下图

方法2

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        function tonone() {

            document.getElementById('ull').style.display='none';

        }

    </script>

</head>

<body>

    <div id="box">

        <p id="btn" onclick="tonone()">标签1</p>

        <ul id="ull" style="display: block;">

            <li><a href="#">手写</a></li>

            <li><a href="#">拼音</a></li>

        </ul>

    </div>

</body>

</html>

方法3

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload=function ()

        {

            document.getElementById('btn').onclick=function ()

            {

                document.getElementById('ull').style.display='none';

            }

        }

    </script>

</head>

<body>

    <div id="box">

        <p id="btn" >标签1</p>

        <ul id="ull" style="display: block;">

            <li><a href="#">手写</a></li>

            <li><a href="#">拼音</a></li>

        </ul>

    </div>

</body>

</html>

方法4

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload=function ()

        {

            var obtn = document.getElementById('btn');

            var oull = document.getElementById('ull');

            obtn.onclick=function ()

            {

                oull.style.display='none';

            }

        }

    </script>

</head>

<body>

    <div id="box">

        <p id="btn" >标签1</p>

        <ul id="ull" style="display: block;">

            <li><a href="#">手写</a></li>

            <li><a href="#">拼音</a></li>

        </ul>

    </div>

</body>

</html>

在方法4基础上加上if判断就可以实现页面展开收缩菜单功能

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script>

        window.onload=function ()

        {

            var obtn = document.getElementById('btn');

            var oull = document.getElementById('ull');

            obtn.onclick=function ()

            {

                if(oull.style.display=='none')

                {

                   oull.style.display='block'

                }

                else

                {

                    oull.style.display='none'

                }

            }

        }

    </script>

</head>

<body>

    <div id="box">

        <p id="btn" >标签1</p>

        <ul id="ull" style="display: block;">

            <li><a href="#">手写</a></li>

            <li><a href="#">拼音</a></li>

        </ul>

    </div>

</body>

</html>

效果如下

js之展开收缩菜单，用到window.onload ,onclick,的更多相关文章

  1. jQuery弹性展开收缩菜单插件gooey.js

    分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <hea ...

  2. js笔记（4）--关于在window.onload()里面定义函数，调用函数无法执行~

    由于本人学习js学不久,所以,今天刚好遇到了一个关于在window.onload里面定义函数,然后在html里面调用函数时出现错误.具体见下面: <!DOCTYPE html> <h ...

  3. 基于jQuery弹性展开收缩菜单插件gooey.js

    首先 引入css <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel ...

  4. js中window.onload 与 jquery中$(document.ready()) 測试

    js中window.onload 与 jquery中$(document.ready())差别,验证代码例如以下(调换js代码和Jquer代码书写顺序測试.执行结果一样.因此与代码书写位置没关系): ...

  5. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别

      body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...

  6. 页面加载之window.onload=function(){} 和 $(function(){})的区别

    通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...

  7. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别

    $().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...

  8. js实现的侧边栏展开收缩效果

    原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...

  9. jQuery：用 lightTreeview 实现树形分类菜单的功能 展开收缩分类代码

    最近在做前端开发项目中,需要用到树形结构.在网上查阅到了许多相应资源.其中觉得lightTreeview是一款非常不错的JQ树形分类菜单代码,结构简单,支持多级.还有详细的参数可以配置,以实现各种效果 ...

随机推荐

  1. Swift5 语言参考(九) 泛型和参数

    本章介绍泛型类型,函数和初始值设定项的参数和参数.声明泛型类型,函数,下标或初始化程序时,可以指定泛型类型,函数或初始化程序可以使用的类型参数.当创建泛型类型的实例或调用泛型函数或初始化程序时,这些类 ...

  2. linux上安装redis4.0.9

    redis安装从3.0的版本到现在4.0的版本,现在装一个4.0的版本供大家学习使用. 先yum安装gcc yum -y install gcc 已加载插件:fastestmirror, langpa ...

  3. Shell - 简明Shell入门06 - 循环语句（Loop）

    示例脚本及注释 #!/bin/bash # for循环 for filename in t1 t2 t3 do touch $filename.txt echo "Create new fi ...

  4. android自定义控件 几种方式总结

    方式1:不继承任何组件 , 直接在代码里面调用实例化.public class ProgressDialog { private Dialog dialog; public ProgressDialo ...

  5. Nutch的nutch-default.xml和regex-urlfilter.txt的中文解释

    nutch-default解释.xml <?xml version="1.0"?> <?xml-stylesheet type="text/xsl&qu ...

  6. Numpy 常用矩阵计算函数

    基本属性 在做一些数据分析的时候,我们通常会把数据存为矩阵的形式,然后python本身对于矩阵的操作是不够的,因此出现了numpy这样一个科学开发库来进行python在次上面的不足. Numpy's ...

  7. Mac下安装Eclipse和Tomcat等

    Mac下做Java开发还是很方便的,不用像.NET开发一样在Parallel Desktop里面安装Windows虚拟机,Mac下面默认已经安装了JDK. 当然,你如果要安装JDK7,请先阅读:htt ...

  8. Android分组子级的不同视图布局之BUG奇遇记

    Android分组子级的不同视图布局之BUG奇遇记 最近在使用按日期分类列表,二级条目可能不一样,于是就想到了ExpandableListView. ExpandableListView的布局显示分割 ...

  9. 全网最全的Windows下Anaconda2 / Anaconda3里Python语言实现定时发送微信消息给好友或群里（图文详解）

    不多说,直接上干货! 缘由: (1)最近看到情侣零点送祝福,感觉还是很浪漫的事情,相信有很多人熬夜为了给爱的人送上零点祝福,但是有时等着等着就睡着了或者时间并不是卡的那么准就有点强迫症了,这是也许程序 ...

  10. 磁盘分区以及Linux目录挂载详解

    一.背景 一直以来,对于磁盘的分区以及Linux目录挂载的概念都不是很清晰,现在趁着春暖花开周末在家没事就研究了下它们,现在来分享我的理解. 二.概念详解 1.磁盘分区 磁盘分区是把物理的磁盘空间按照 ...