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获得网页窗口实际大小的示例代码
Sep 21 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
js光标定位文本框回车表单提交问题的解决方法
May 11 Javascript
原生JavaScript实现异步多文件上传
Dec 02 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
js中获取时间new Date()的全面介绍
Jun 20 Javascript
浅谈jquery设置和获得checkbox选中的问题
Aug 19 Javascript
Javascript中常见的逻辑题和解决方法
Sep 17 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
vue-cli初始化项目中使用less的方法
Aug 09 Javascript
node.js使用fs读取文件出错的解决方案
Oct 23 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输出控制功能在简繁体转换中的应用
2006/10/09 PHP
dedecms 制作模板中使用的全局标记图文教程
2007/03/11 PHP
使用session判断用户登录用户权限(超简单)
2013/06/08 PHP
PhpSpreadsheet设置单元格常用操作汇总
2020/11/13 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
javascript中encodeURI和decodeURI方法使用介绍
2013/05/06 Javascript
jQuery实现转动随机数抽奖效果的方法
2015/05/21 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
javascript简单实现跟随滚动条漂浮的返回顶部按钮效果
2016/08/19 Javascript
Vue.js中用v-bind绑定class的注意事项
2016/12/13 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
2017/08/26 Javascript
关于vue面试题汇总
2018/03/20 Javascript
微信小程序-API接口安全详解
2019/07/16 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
解决vue项目中某一页面不想引用公共组件app.vue的问题
2020/08/14 Javascript
Vue通过provide inject实现组件通信
2020/09/03 Javascript
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
利用Python实现Shp格式向GeoJSON的转换方法
2019/07/09 Python
Python Web框架之Django框架文件上传功能详解
2019/08/16 Python
python excel转换csv代码实例
2019/08/26 Python
Python基于模块Paramiko实现SSHv2协议
2020/04/28 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
老教师工作总结的自我评价
2013/09/27 职场文书
会计专业自荐信
2013/12/02 职场文书
党员学习十八大感想
2014/01/17 职场文书
高中生的自我鉴定范文
2014/01/24 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
幼儿园家长评语大全
2014/04/16 职场文书
在职证明书范本(2014新版)
2014/09/25 职场文书
继承公证书格式
2015/01/26 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
信息技术课教学反思
2016/02/23 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
Java Spring Lifecycle的使用
2022/05/06 Java/Android