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的parseInt 取整使用
May 09 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
Aug 12 Javascript
js如何设置在iframe框架中指定div不显示
Dec 04 Javascript
JavaScript获取页面中表单(form)数量的方法
Apr 03 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
js中url对象化管理分析
Dec 29 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
Sep 12 Javascript
vue-quill-editor+plupload富文本编辑器实例详解
Oct 19 Javascript
Vue仿百度搜索功能
Dec 28 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
对淘宝URL中ID提取的PHP代码
2013/09/01 PHP
如何使用微信公众平台开发模式实现多客服
2016/01/06 PHP
PHP编程获取音频文件时长的方法【基于getid3类】
2017/04/20 PHP
万能的php分页类
2017/07/06 PHP
学习js所必须要知道的一些
2007/03/07 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
2013/11/12 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
JavaScript实现数组随机排序的方法
2015/06/26 Javascript
详细解读JavaScript编程中的Promise使用
2015/07/27 Javascript
js拼接html字符串的注意事项
2016/10/13 Javascript
在vue项目中安装使用Mint-UI的方法
2017/12/27 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
2018/04/05 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
微信小程序之批量上传并压缩图片的实例代码
2018/07/05 Javascript
vue 权限认证token的实现方法
2018/07/17 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
[01:01:41]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第二场 1月31日
2021/03/11 DOTA
python实现聚类算法原理
2018/02/12 Python
python计算日期之间的放假日期
2018/06/05 Python
Python爬虫之pandas基本安装与使用方法示例
2018/08/08 Python
Python使用combinations实现排列组合的方法
2018/11/13 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
Python中对象的比较操作==和is区别详析
2021/02/12 Python
英国最大的手表网站:The Watch Hut
2017/03/31 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
竞聘医务工作人员的自我评价分享
2013/11/04 职场文书
2014年国培研修感言
2014/03/09 职场文书
夫妻房产协议书的格式
2014/10/11 职场文书
高三复习计划
2015/01/19 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
Django如何与Ajax交互
2021/04/29 Python
PyMongo 查询数据的实现
2021/06/28 Python