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 相关文章推荐
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jQuery之end()和pushStack()使用介绍
Feb 07 Javascript
jQuery父级以及同级元素查找介绍
Sep 04 Javascript
js/jquery解析json和数组格式的方法详解
Jan 09 Javascript
jquery动态添加删除一行数据示例
Jun 12 Javascript
jQuery地图map悬停显示省市代码分享
Aug 20 Javascript
JS实现浏览器状态栏文字闪烁效果的方法
Oct 27 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
JavaScript对象创建模式实例汇总
Oct 03 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
从零搭一个自用的前端脚手架的方法步骤
Sep 23 Javascript
Javascript数组及类数组相关原理详解
Oct 29 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 数组二分法查找函数代码
2010/02/16 PHP
PHP多个版本的分析解释
2011/07/21 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
PHP中使用register_shutdown_function函数截获fatal error示例
2015/04/21 PHP
简单谈谈PHP中的include、include_once、require以及require_once语句
2016/04/23 PHP
使用JavaScript创建新样式表和新样式规则
2016/06/14 PHP
jquery构造器的实现代码小结
2011/05/16 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
javascript获取鼠标位置部分的实例代码(兼容IE,FF)
2013/08/05 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
jquery获取所有选中的checkbox实现代码
2016/05/26 Javascript
详解js的事件处理函数和动态创建html标记方法
2016/12/16 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
input获取焦点时底部菜单被顶上来问题的解决办法
2017/01/24 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
实例详解JSON取值(key是中文或者数字)方式
2017/08/24 Javascript
JavaScript canvas动画实现时钟效果
2020/02/10 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
基于elementUI竖向表格、和并列的案例
2020/10/26 Javascript
vue 中this.$set 动态绑定数据的案例讲解
2021/01/29 Vue.js
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
Python+pandas计算数据相关系数的实例
2018/07/03 Python
关于Python-faker的函数效果一览
2019/11/28 Python
python函数声明和调用定义及原理详解
2019/12/02 Python
使用phonegap进行本地存储的实现方法
2017/03/31 HTML / CSS
Feelunique中文官网:欧洲最大化妆品零售电商
2020/07/10 全球购物
Sony C++笔试题
2013/03/10 面试题
探亲邀请信范文
2014/01/30 职场文书
秸秆管理实施方案
2014/03/15 职场文书
乡镇团委工作总结2015
2015/05/26 职场文书
Sql Server 行数据的某列值想作为字段列显示的方法
2022/04/20 SQL Server