js实现按钮开关单机下拉菜单效果


Posted in Javascript onNovember 22, 2018

js实现按钮开关单机下拉菜单效果

通过onclick单击事件,实现效果,代码如下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>开关按钮设置</title>
  </head>
  <link rel="stylesheet" href="css/Default style sheet.css" rel="external nofollow" />
  <style>
    div{
    width:120px;
    margin: 0px auto;
    border: 2px solid black;}
    ul{
      display: none;
    }
  </style>
  <script>
    window.onload=function(){
      var odiv=document.getElementById("v");
      var oli=odiv.getElementsByTagName("ul")[0];
      var   onf=true
        odiv.onclick=function(){
          if (onf==true) {
            oli.style.display='block';
            onf=false
          } else{
            oli.style.display='none';
            onf=true
          }
        }
    }
  </script>
  <body>
    <div id="v">
      <h4>你好啊,小老弟</h2>
    <ul>
      <li>come</li>
      <li>on</li>
      <li>do</li>
    </ul>
    </div>
     
  </body>
</html><br>

实现效果:

js实现按钮开关单机下拉菜单效果

总结

以上所述是小编给大家介绍的js实现按钮开关单机下拉菜单效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript document.execCommand() 常用解析
Dec 14 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
详解JavaScript中的blink()方法的使用
Jun 08 Javascript
学习JavaScript设计模式之单例模式
Jan 19 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
获取select的value、text值的简单示例(jquery与javascript)
Dec 07 Javascript
原生的强大DOM选择器querySelector介绍
Dec 21 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
vue插件draggable实现拖拽移动图片顺序
Dec 01 Javascript
使用post方法实现json往返传输数据的方法
Mar 30 Javascript
JS开发 富文本编辑器TinyMCE详解
Jul 19 Javascript
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
vue+node实现图片上传及预览的示例方法
Nov 22 #Javascript
微信上传视频文件提示(推荐)
Nov 22 #Javascript
vue-cli3.0如何使用CDN区分开发、生产、预发布环境
Nov 22 #Javascript
详解三种方式解决vue中v-html元素中标签样式
Nov 22 #Javascript
详解Vue组件之作用域插槽
Nov 22 #Javascript
详解vue中localStorage的使用方法
Nov 22 #Javascript
微信小程序功能之全屏滚动效果的实现代码
Nov 22 #Javascript
You might like
PHP连接access数据库
2015/03/27 PHP
Yii框架中使用PHPExcel的方法分析
2019/07/25 PHP
js小技巧--自动隐藏红叉叉
2007/08/13 Javascript
JavaScript 内置对象属性及方法集合
2010/07/04 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
js中事件的处理与浏览器对象示例介绍
2013/11/29 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
jquery和javascript中如何将一元素的内容赋给另一元素
2014/01/09 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
JavaScript中Number.MIN_VALUE属性的使用示例
2015/06/04 Javascript
原生JS实现风箱式demo,并封装了一个运动框架(实例代码)
2016/07/22 Javascript
jQuery模拟爆炸倒计时功能实例代码
2017/08/21 jQuery
使用vue根据状态添加列表数据和删除列表数据的实例
2018/09/29 Javascript
实例详解vue中的$root和$parent
2019/04/29 Javascript
jsonp跨域获取百度联想词的方法分析
2019/05/13 Javascript
vue悬浮可拖拽悬浮按钮的实例代码
2019/08/20 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
[00:14]护身甲盾
2019/03/06 DOTA
[54:28]EG vs OG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
基于Django模板中的数字自增(详解)
2017/09/05 Python
Python实现PS滤镜特效Marble Filter玻璃条纹扭曲效果示例
2018/01/29 Python
python pandas中DataFrame类型数据操作函数的方法
2018/04/08 Python
详解Python数据分析--Pandas知识点
2019/03/23 Python
python爬虫简单的添加代理进行访问的实现代码
2019/04/04 Python
解决django中form表单设置action后无法回到原页面的问题
2020/03/13 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
体育纪念品、亲笔签名的体育收藏品:Steiner Sports
2020/07/31 全球购物
工商管理专业实习大学生自我鉴定
2013/09/19 职场文书
幼师自荐信范文
2013/10/06 职场文书
社会实践感言
2014/01/25 职场文书
致百米运动员广播稿
2014/01/29 职场文书
全民创业工作总结
2015/08/13 职场文书
Nginx四层负载均衡的配置指南
2021/06/11 Servers
Python集合的基础操作
2021/11/01 Python