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 相关文章推荐
用dom+xhtml+css制作的一个相册效果代码打包下载
Jan 24 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
基于jquery的给文章加入关键字链接
Oct 26 Javascript
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 Javascript
jQuery实现网页顶部固定导航效果代码
Dec 24 Javascript
详解Bootstrap四种图片样式
Jan 04 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
jquery实现进度条状态展示
Mar 26 jQuery
vue+swiper实现左右滑动的测试题功能
Oct 30 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
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
比较完整的微信开发php代码
2016/08/02 PHP
php自定义函数实现汉字转换utf8编码的方法
2016/09/29 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
非常漂亮的JS代码经典广告
2007/10/21 Javascript
js 关于=+与+=日期函数使用说明(赋值运算符)
2011/11/15 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
利用原生JavaScript获取元素样式只是获取而已
2014/10/08 Javascript
JS实现CheckBox复选框全选全不选功能
2015/05/06 Javascript
分享jQuery插件的学习笔记
2016/01/14 Javascript
jQuery EasyUI框架中的Datagrid数据表格组件结构详解
2016/06/09 Javascript
微信公众号 客服接口的开发实例详解
2016/09/28 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
解决webpack -p压缩打包react报语法错误的方法
2017/07/03 Javascript
Vue 滚动行为的具体使用方法
2017/09/13 Javascript
vue 实现类似淘宝星级评分的示例
2018/03/01 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
2018/06/15 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
javaScript把其它类型转换为Number类型
2019/10/13 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
Python字符串处理之count()方法的使用
2015/05/18 Python
Python wxPython库消息对话框MessageDialog用法示例
2018/09/03 Python
Flask配置Cors跨域的实现
2019/07/12 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
谈谈python垃圾回收机制
2020/09/27 Python
python实现感知机模型的示例
2020/09/30 Python
战友聚会邀请函
2014/01/18 职场文书
四年级小学生评语
2014/12/26 职场文书
商场收银员岗位职责
2015/04/07 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
《迟到》教学反思
2016/02/24 职场文书
Django+Nginx+uWSGI 定时任务的实现方法
2022/01/22 Python
python处理json数据文件
2022/04/11 Python
vue elementUI批量上传文件
2022/04/26 Vue.js