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 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
ExtJS 工具栏 分页事件参数
Mar 05 Javascript
仅IE9/10同时支持script元素的onload和onreadystatechange事件分析
Apr 27 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
caller和callee的区别介绍及演示结果
Mar 10 Javascript
Javasipt:操作radio标签详解
Dec 30 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
自学实现angularjs依赖注入
Dec 20 Javascript
Angular动态添加、删除输入框并计算值实例代码
Mar 29 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
AngularJS实现的简单拖拽功能示例
Jan 02 Javascript
JavaScript 跨域之POST实现方法
May 07 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/12/06 PHP
php中的MVC模式运用技巧
2007/05/03 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP实践教程之过滤、验证、转义与密码详解
2017/07/24 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
htm调用JS代码
2007/03/15 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
AngularJS使用自定义指令替代ng-repeat的方法
2016/09/17 Javascript
jQuery动态生成Bootstrap表格
2016/11/01 Javascript
nodeJS删除文件方法示例
2016/12/25 NodeJs
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
js中el表达式的使用和非空判断方法
2018/03/28 Javascript
微信打开网址添加在浏览器中打开提示的办法
2019/05/20 Javascript
小程序自定义圆形进度条
2020/11/17 Javascript
[12:29]《一刀刀一天》之DOTA全时刻19:蝙蝠骑士田伯光再度不举
2014/06/10 DOTA
Python实现从订阅源下载图片的方法
2015/03/11 Python
Python中列表的一些基本操作知识汇总
2015/05/20 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python字符串特性及常用字符串方法的简单笔记
2016/01/04 Python
python daemon守护进程实现
2016/08/27 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
PyCharm配置anaconda环境的步骤详解
2020/07/31 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
浅谈HTML5 Web Worker的使用
2018/01/05 HTML / CSS
俄罗斯在线服装店:STOLNIK
2021/03/07 全球购物
行政人员岗位职责
2013/12/08 职场文书
会计电算化大学生职业规划书
2014/02/05 职场文书
保安岗位职责
2014/02/21 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
培训班开班仪式主持词
2014/03/28 职场文书
洗手间标语
2014/06/23 职场文书
行政经理岗位职责
2015/04/15 职场文书
工程质量保证书
2015/05/09 职场文书
冰雪公主观后感
2015/06/16 职场文书