js之展开收缩菜单，用到window.onload ,onclick,
目标效果：点击标签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,的更多相关文章
- jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <hea ...
- js笔记（4）--关于在window.onload()里面定义函数，调用函数无法执行~
由于本人学习js学不久,所以,今天刚好遇到了一个关于在window.onload里面定义函数,然后在html里面调用函数时出现错误.具体见下面: <!DOCTYPE html> <h ...
- 基于jQuery弹性展开收缩菜单插件gooey.js
首先 引入css <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel ...
- js中window.onload 与 jquery中$(document.ready()) 測试
js中window.onload 与 jquery中$(document.ready())差别,验证代码例如以下(调换js代码和Jquer代码书写顺序測试.执行结果一样.因此与代码书写位置没关系): ...
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()的区别
body中的onload()和window.onload以及$(document).ready()的区别: 1.前两者都表示当页面加载元素(包括图片等信息)完毕后执行的操作,而且两者在各种浏览器中 ...
- 页面加载之window.onload=function(){} 和 $(function(){})的区别
通用的页面加载js有四种方式: 1.window.onload = function(){}; —-js 2.$(window).load(function(){});——Jquery 3.$(doc ...
- jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
$().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...
- js实现的侧边栏展开收缩效果
原文地址:http://www.softwhy.com/forum.php?mod=viewthread&tid=12246 <!DOCTYPE html> <html> ...
- jQuery：用 lightTreeview 实现树形分类菜单的功能 展开收缩分类代码
最近在做前端开发项目中,需要用到树形结构.在网上查阅到了许多相应资源.其中觉得lightTreeview是一款非常不错的JQ树形分类菜单代码,结构简单,支持多级.还有详细的参数可以配置,以实现各种效果 ...
随机推荐
- IOS渗透测试第一步-基础知识统一放送
原文: http://www.websecgeeks.com/2017/04/ios-application-pentesting-part-3.html http://www.websecgeeks ...
- Apache VirtualHost的配置
自从电脑更换为mac后, 一直没有时间去配置php的环境.导致每次要更改php代码的时候, 都是本地更改,然后直接推送到服务器上运行 这样的开发和测试及其耗时且繁琐, 所以早上特地决定弄好mac下的p ...
- C#6.0语言规范(九) 命名空间
C#程序使用命名空间进行组织.命名空间既可以用作程序的“内部”组织系统,也可以用作“外部”组织系统 - 一种呈现暴露给其他程序的程序元素的方式. 提供了使用指令(使用指令)以便于使用命名空间. 编译单 ...
- Centos7调整swap分区
如何让服务器响应更快?如何避免应用出现内存不足的错误?最简单的方法就是增加交换空间.Swap是存储盘上的一块自留地,操作系统可以在这里暂存一些内存里放不下的东西. 这从某种程度上相当于增加了服务器的可 ...
- mybatis Mapper XML 映射文件
传送门:mybatis官方文档 Mapper XML 文件详解 一. 数据查询语句 1. select <select id="selectPerson" parameter ...
- cmd下【java监视和管理控制台】
不需要安装插件,只要jmeter的运行环境配置好就可以了:打开这个小工具的步骤很简单,如果你已经配置好了Jmeter运行的环境,那么你也就不用去做其他的配置,直接 点击:开始——>运行——> ...
- Swift 里 Set（四）Testing for Membership
即contains操作 /// - Parameter member: An element to look for in the set. /// - Returns: `true` if `mem ...
- [LeetCode] 反转整数
题目: 给定一个 32 位有符号整数,将整数中的数字进行反转. 示例 1: 输入: 123 输出: 321 示例 2: 输入: -123 输出: -321 示例 3: 输入: 120 输出: 21 注 ...
- idea 安装mybatis plugin （mybatis插件）
注意:可以用免费版本的,就是下面没有 被红框圈中的 Free Mybatis Plugin 安装上以后需要破解,先找到下面的文件 打开文件,设置其中的key 和 value : 这里面的key 和 v ...
- 处理 Maven 项目名称红色感叹号的问题
问题描述: maven 本地仓库位置移动 ,重启IDE,项目出现感叹号. 解决方案: 附加: 其它原因,造成项目感叹号,且pom.xml和Build Path下又没有相应的错误的提示的情况下. 那么选 ...