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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
JavaScript Prototype对象
Jan 07 Javascript
一组JS创建和操作表格的函数集合
May 07 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
菜鸟javascript基础资料整理2
Dec 06 Javascript
检测input每次的输入是否合法遇到汉字输入就有问题
May 23 Javascript
javascript动态加载三
Aug 22 Javascript
jquery遍历之parent()和parents()的区别及parentsUntil()方法详解
Dec 02 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
详解Bootstrap插件
Apr 25 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
layui的表单提交以及验证和修改弹框的实例
Sep 09 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
全国FM电台频率大全 - 13 福建省
2020/03/11 无线电
PHP使用GIFEncoder类处理gif图片实例
2014/07/01 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
js类的静态属性和实例属性的理解
2009/10/01 Javascript
JavaScript 拾碎[三] 使用className属性
2010/10/16 Javascript
jquery 选项卡效果 新手代码
2011/07/08 Javascript
jQuery右键菜单contextMenu使用实例
2011/09/28 Javascript
javascript中动态加载js文件多种解决办法总结
2013/11/15 Javascript
深入理解JSON数据源格式
2014/01/10 Javascript
js实现回放拖拽轨迹从过程上进行分析
2014/06/26 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
setTimeout学习小结
2017/02/08 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
[04:11]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/01/30 DOTA
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
浅析Python中MySQLdb的事务处理功能
2016/09/21 Python
python开发利器之ulipad的使用实践
2017/03/16 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
在django中查询获取数据,get, filter,all(),values()操作
2020/08/09 Python
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
幼儿教师求职信
2014/05/24 职场文书
企业总经理任命书
2014/06/05 职场文书
绿色出行口号
2014/06/18 职场文书
商务英语专业毕业生求职信
2014/07/06 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
西游降魔篇观后感
2015/06/15 职场文书
2016教师学习党章心得体会
2016/01/15 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书