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

一.准备阶段

html文件

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="box">
  9. <p id="btn">标签1</p>
  10. <ul id="ull" style="display: block;">
  11. <li><a href="#">手写</a></li>
  12. <li><a href="#">拼音</a></li>
  13. </ul>
  14. </div>
  15. </body>
  16. </html>

运行后页面效果

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

方法1

html代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <div id="box">
  9. <p id="btn" onclick="document.getElementById('ull').style.display='none'">标签1</p>
  10. <ul id="ull" style="display: block;">
  11. <li><a href="#">手写</a></li>
  12. <li><a href="#">拼音</a></li>
  13. </ul>
  14. </div>
  15. </body>
  16. </html>

效果从上图到下图

方法2

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script>
  7. function tonone() {
  8. document.getElementById('ull').style.display='none';
  9. }
  10. </script>
  11. </head>
  12. <body>
  13. <div id="box">
  14. <p id="btn" onclick="tonone()">标签1</p>
  15. <ul id="ull" style="display: block;">
  16. <li><a href="#">手写</a></li>
  17. <li><a href="#">拼音</a></li>
  18. </ul>
  19. </div>
  20. </body>
  21. </html>

方法3

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script>
  7. window.onload=function ()
  8. {
  9. document.getElementById('btn').onclick=function ()
  10. {
  11. document.getElementById('ull').style.display='none';
  12. }
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <div id="box">
  18. <p id="btn" >标签1</p>
  19. <ul id="ull" style="display: block;">
  20. <li><a href="#">手写</a></li>
  21. <li><a href="#">拼音</a></li>
  22. </ul>
  23. </div>
  24. </body>
  25. </html>

方法4

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script>
  7. window.onload=function ()
  8. {
  9. var obtn = document.getElementById('btn');
  10. var oull = document.getElementById('ull');
  11. obtn.onclick=function ()
  12. {
  13. oull.style.display='none';
  14. }
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. <div id="box">
  20. <p id="btn" >标签1</p>
  21. <ul id="ull" style="display: block;">
  22. <li><a href="#">手写</a></li>
  23. <li><a href="#">拼音</a></li>
  24. </ul>
  25. </div>
  26. </body>
  27. </html>

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

代码如下

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. <script>
  7. window.onload=function ()
  8. {
  9. var obtn = document.getElementById('btn');
  10. var oull = document.getElementById('ull');
  11. obtn.onclick=function ()
  12. {
  13. if(oull.style.display=='none')
  14. {
  15. oull.style.display='block'
  16. }
  17. else
  18. {
  19. oull.style.display='none'
  20. }
  21. }
  22. }
  23. </script>
  24. </head>
  25. <body>
  26. <div id="box">
  27. <p id="btn" >标签1</p>
  28. <ul id="ull" style="display: block;">
  29. <li><a href="#">手写</a></li>
  30. <li><a href="#">拼音</a></li>
  31. </ul>
  32. </div>
  33. </body>
  34. </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. Git-遇到的问题以及解决方法

    1.将本地内容推送到远程仓库后,远程仓库里的文件夹不可点击 原因:在本地添加文件夹A时,又在A里使用了git init命令 解决:删除文件夹A,再重新添加过 2.其他人推送不了内容到远程仓库 原因:权 ...

  2. vue.js 的起步

    vue.js 的起步 转载 作者:伯乐在线专栏作者 - 1000copy 点击 → 了解如何加入专栏作者 如需转载,发送「转载」二字查看说明 介绍 vue.js 是一个客户端js库,可以用来开发单页应 ...

  3. SQL 一对多联表查询最大值

    有两个数据表City表和Price表,CIty表的结构如下: Price表的结构如下: 查询每个城市最大的销售价格,并以最大价格进行降序排列,选取前5条记录,SQL语句的代码如下: * from (s ...

  4. 关于SQL的常用操作(增、删、改、查)

    关于SQL的常见操作主要是增.删.改.查. 1.增,顾名思义就是新增数据(insert into).该语句用于向表中插入新纪录.insert into有两种用法. (1).无需指定要插入数据的列名,只 ...

  5. flask-Datatables

    我先给大家推荐一个jQuery开源库网址  http://www.jq22.com/ Datatables 是一款jquery表格插件.他是一个高度灵活的工具,可以将任何HTML表格添加高级的交互功能 ...

  6. POJ 2864

    #include <iostream> #define MAXN 600 using namespace std; int _m[MAXN][MAXN]; int main() { //f ...

  7. TFS2018环境搭建一硬件要求

    本文关于微软的团队协作工具TFS2018搭建 1.操作系统要求 TFS可以安装在Windows Server和Windows PC操作系统中,但是TFS2018和2018只支持64位操作系统中,早期的 ...

  8. php javascript comet

    简单描述: comet是用ajax实现的服务器推送,有两种实现comet的方式,长轮询和流,这里只实现长轮询. 长轮询的过程:页面发起一个服务器请求,然后服务器一直保持连接打开,直到有数据返回.返回数 ...

  9. Elasticsearch5.3.1 IK分词,同义词/联想搜索设置

    [大数据]-Elasticsearch5.3.1 IK分词,同义词/联想搜索设置  原文地址:http://www.cnblogs.com/NextNight/p/6837407.html --题外话 ...

  10. 15 图-图的遍历-基于邻接矩阵实现的BFS与DFS算法

    算法分析和具体步骤解说直接写在代码注释上了 TvT 没时间了等下还要去洗衣服 就先不赘述了 有不明白的欢迎留言交流!(估计是没人看的了) 直接上代码: #include<stdio.h> ...