目标效果:点击标签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 语言参考(七) 属性

    属性提供有关声明或类型的更多信息.Swift中有两种属性,即适用于声明的属性和适用于类型的属性. 您可以通过编写@符号后跟属性的名称以及属性接受的任何参数来指定属性: @attribute name ...

  2. PowerDesigner生成OOM时类名属性名转换

    Examples Script 1: Convert a name into a class code (JAVA naming convention)转换类名 .foreach_part(%Name ...

  3. centos清华源地址,ubuntu阿里云源

    清华这个源挺好用,替换原先/etc/yum.repos.d/CentOS-Base.repo, 然后运行 sudo yum makecache 生成缓存 centos6 [base] name=Cen ...

  4. linux下hex转ascii

    场景: 在wireshark里面提取response包的值. echo -n "1f8b08000000000000030cd335b2e580014" | xxd -r -p & ...

  5. Eclipse连接MuMu模拟器 方便 测试 查日志

    Eclipse连接MuMu模拟器 方便 测试 查日志 问题由来 真机测试麻烦(首先你得拿一部手机,然后在用数据线连接电脑和手机...) 解决流程 确保打开MuMu模拟器和Eclipse的DDMS功能 ...

  6. GCC C语言 DLL范例,含源码

    作者:小白救星 编译:gcc -c -DBUILDING_HZ_DLL1 hzdll1.c           gcc -shared -o hzdll1.dll hzdll1.o -Wl,--kil ...

  7. 课程一(Neural Networks and Deep Learning)总结——2、Deep Neural Networks

    Deep L-layer neural network 1 - General methodology As usual you will follow the Deep Learning metho ...

  8. Shell 流程控制 if while for

    if else if if 语句语法格式: if condition then command1 command2 ... commandN fi 写成一行(适用于终端命令提示符): if [ $(p ...

  9. npm 安装 cannot find module

    window7安装module出现 Connot find module 'xxx' 解决办法: 添加环境变量命名为:NODE_PATH 设置值为:%AppData%\npm\node_modules ...

  10. Configuration problem: Failed to import bean definitions from relative location

    问题现象: 最近开始做新需求,然后在Tomcat上部署项目时,出现了如下报错: [12-05 09:54:27,161 ERROR] ContextLoader.java:351 - Context ...