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 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
javascript parseInt 函数分析(转)
Mar 21 Javascript
JavaScript/jQuery 表单美化插件小结
Feb 14 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
jquery 缓存问题的几个解决方法
Nov 11 Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 Javascript
JavaScript给url网址进行encode编码的方法
Mar 18 Javascript
jquery选择器简述
Aug 31 Javascript
jquery动态添加文本并获取值的方法
Oct 12 Javascript
如何获取元素的最终background-color
Feb 06 Javascript
探究react-native 源码的图片缓存问题
Aug 24 Javascript
vue通过路由实现页面刷新的方法
Jan 25 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
别人整理的服务器变量:$_SERVER
2006/10/20 PHP
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP 伪静态隐藏传递参数名的四种方法
2010/02/22 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
Laravel框架表单验证详解
2014/09/04 PHP
php文件操作之小型留言本实例
2015/06/20 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
终于解决了IE8不支持数组的indexOf方法
2013/04/03 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
2013/11/30 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
2016/09/09 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
js 提交form表单和设置form表单请求路径的实现方法
2016/10/25 Javascript
AngularJS入门教程之模块化操作用法示例
2016/11/02 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
2017/11/27 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
PHPStorm中如何对nodejs项目进行单元测试详解
2019/02/28 NodeJs
Vue的H5页面唤起支付宝支付功能
2019/04/18 Javascript
JavaScript实现网页tab栏效果制作
2020/11/20 Javascript
Python中time模块与datetime模块在使用中的不同之处
2015/11/24 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
Python实现的多叉树寻找最短路径算法示例
2018/07/30 Python
使用Python监视指定目录下文件变更的方法
2018/10/15 Python
Python从数据库读取大量数据批量写入文件的方法
2018/12/10 Python
Python实现简单石头剪刀布游戏
2021/01/20 Python
详解python中docx库的安装过程
2019/11/08 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
欧洲最古老的鞋厂:Peter Kaiser
2019/11/05 全球购物
模具专业毕业生自荐书范文
2014/02/19 职场文书
个人先进事迹材料范文
2014/12/29 职场文书
留学推荐信怎么写
2015/03/26 职场文书
Python中tkinter的用户登录管理的实现
2021/04/22 Python
Win11怎样将锁屏账户头像图片改成动画视频
2021/11/21 数码科技