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算法学习(直接插入排序)
Apr 12 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
浅析jquery ajax异步调用方法中不能给全局变量赋值的原因及解决方法
Jan 10 Javascript
javascript制作网页图片上实现下雨效果
Feb 26 Javascript
基于JQuery实现图片轮播效果(焦点图)
Feb 02 Javascript
TypeScript Type Innference(类型判断)
Mar 10 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
jstree创建无限分级树的方法【基于ajax动态创建子节点】
Oct 25 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
如何更好的编写js async函数
May 13 Javascript
详解React native fetch遇到的坑
Aug 30 Javascript
JS forEach跳出循环2种实现方法
Jun 24 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
获取URL文件名后缀
2013/10/24 PHP
PHP children()函数讲解
2019/02/03 PHP
js 兼容多浏览器的回车和鼠标焦点事件代码(IE6/7/8,firefox,chrome)
2010/04/14 Javascript
JQuery学习笔记 nt-child的使用
2011/01/17 Javascript
解决js正则匹配换行问题实现代码
2012/12/10 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
2014/06/26 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
使用jQuery制作浮动工具栏的实例分享
2016/05/13 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
微信小程序的分类页面制作
2017/06/27 Javascript
解析vue中的$mount
2017/12/21 Javascript
Vue 中的compile操作方法
2018/02/26 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
如何用原生js写一个弹窗消息提醒插件
2019/05/24 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
js实现列表向上无限滚动
2020/01/13 Javascript
vue仿携程轮播图效果(滑动轮播,下方高度自适应)
2021/02/11 Vue.js
Python实现把数字转换成中文
2015/06/29 Python
Python探索之修改Python搜索路径
2017/10/25 Python
使用python实现链表操作
2018/01/26 Python
详解pyqt5 动画在QThread线程中无法运行问题
2018/05/05 Python
解决python nohup linux 后台运行输出的问题
2018/05/11 Python
python机器学习库scikit-learn:SVR的基本应用
2019/06/26 Python
django url到views参数传递的实例
2019/07/19 Python
django Model层常用验证器及自定义验证器详解
2020/07/15 Python
Python实现钉钉/企业微信自动打卡的示例代码
2021/02/02 Python
区域销售经理职责
2013/12/22 职场文书
教师党员公开承诺书
2014/03/25 职场文书
租赁意向书范本
2014/04/01 职场文书
商务英语专业求职信
2014/06/26 职场文书
大学本科生职业生涯规划书范文
2014/09/14 职场文书
公民授权委托书
2014/10/15 职场文书
公司庆典主持词
2015/07/04 职场文书
分家协议书范本
2016/03/22 职场文书
导游词之沈阳清昭陵
2019/12/28 职场文书
Java中API的使用方法详情
2022/04/06 Java/Android