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 相关文章推荐
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
js 性能优化之算法和流程控制
Feb 15 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
详谈表单重复提交的三种情况及解决方法
Aug 16 Javascript
JavaScript使用atan2来绘制箭头和曲线的实例
Sep 14 Javascript
Angular 5.0 来了! 有这些大变化
Nov 15 Javascript
webpack打包js文件及部署的实现方法
Dec 18 Javascript
浅谈Vue.js中ref ($refs)用法举例总结
Dec 19 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
解决vue打包后vendor.js文件过大问题
Jul 03 Javascript
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取进制余数函数代码
2012/01/19 PHP
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
解析PHP中常见的mongodb查询操作
2013/06/20 PHP
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
Prototype 1.5.0_rc1 及 Prototype 1.5.0 Pre0小抄本
2006/09/22 Javascript
让div层随鼠标移动的实现代码 ie ff
2009/12/18 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
JS 添加千分位与去掉千分位的示例
2013/07/11 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
2015/03/18 Javascript
阻止表单提交按钮多次提交的完美解决方法
2016/05/16 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
vue中使用cropperjs的方法
2018/03/01 Javascript
Vuex入门到上手教程
2018/06/20 Javascript
对angular2中的ngfor和ngif指令嵌套实例讲解
2018/09/12 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
[28:07]完美世界DOTA2联赛PWL S3 Phoenix vs INK ICE 第二场 12.13
2020/12/17 DOTA
在Mac OS上部署Nginx和FastCGI以及Flask框架的教程
2015/05/02 Python
python黑魔法之参数传递
2016/02/12 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python处理菜单消息操作示例【基于win32ui模块】
2018/05/09 Python
python文件操作的简单方法总结
2019/11/07 Python
Python 依赖库太多了该如何管理
2019/11/08 Python
解决PyCharm无法使用lxml库的问题(图解)
2020/12/22 Python
一份比较全的PHP面试题
2016/07/29 面试题
一些关于MySql加速和优化的面试题
2014/01/30 面试题
九年级数学教学反思
2014/02/02 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
JavaScript实例 ODO List分析
2022/01/22 Javascript