目标效果：点击标签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. CodeForces - 940C + CodeForces - 932B (两道比较好的模拟题)

    940C链接:http://codeforces.com/problemset/problem/940/C C. Phone Numbers time limit per test 2 seconds ...

  2. Dubbo原理实现之代理接口的定义

    Dubbo有很多的实现采用了代码模式,Dubbo由代理工厂ProxyFactory对象创建代理对象. ProxyFactory接口的定义如下: @SPI("javassist") ...

  3. Vue2.5开发去哪儿网App 第四章笔记 下

    1.解决非父子组件之间的传值问题 非父子组件传值(Bus/总线/发布订阅模式/观察者模式) 给 Vue类上挂在一个属性,然后创建vue实例时,实例就拥有了这个属性 Vue.prototype.bus ...

  4. 13-01 java StringBuffer类，StringBuilder类

    StringBuffer类的构造方法 package cn.itcast_01; /* * 线程安全(多线程讲解) * 安全 -- 同步 -- 数据是安全的 * 不安全 -- 不同步 -- 效率高一些 ...

  5. vue教程3-02 vue动画

    vue教程3-02 vue动画 以下代码,已经用包管理器下载好vue,animate <!DOCTYPE html> <html lang="en"> &l ...

  6. vue教程1-08 交互 get、post、jsonp

    vue教程1-08 交互 get.post.jsonp 一.如果vue想做交互,引入: vue-resouce 二.get方式 1.get获取一个普通文本数据: <!DOCTYPE html&g ...

  7. Python：线程指南

    1. 线程基础 1.1. 线程状态 线程有5种状态,状态转换的过程如下图所示: 1.2. 线程同步(锁) 多线程的优势在于可以同时运行多个任务(至少感觉起来是这样).但是当线程需要共享数据时,可能存在 ...

  8. Python爬取简书主页信息

    主要学习如何通过抓包工具分析简书的Ajax加载,有时间再写一个Multithread proxy spider提升效率. 1. 关键点: 使用单线程爬取,未登录,爬取简书主页Ajax加载的内容.主要有 ...

  9. Mac OS X 下搭建thrift环境

    1.概述 thrift是一个软件框架,用来进行可扩展且跨语言的服务的开发.它结合了功能强大的软件堆栈和代码生产引擎,以构建在 C++, Java, Python, PHP, Ruby, Erlang, ...

  10. AJAX（Jquery)

    一)jQuery常用AJAX-API 目的:简化客户端与服务端进行局部刷新的异步通讯 (1)取得服务端当前时间 简单形式:jQuery对象.load(url) 返回结果自动添加到jQuery对象代表的 ...