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 base64编码实现代码
Dec 02 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
第六章之辅组类与响应式工具
Apr 25 Javascript
JS HTML5实现拖拽移动列表效果
Aug 27 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
Vue.js实现网格列表布局转换方法
Aug 25 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
从vue源码解析Vue.set()和this.$set()
Aug 30 Javascript
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
Jan 30 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
原生JavaScript实现拖动校验功能
Sep 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
全国FM电台频率大全 - 22 重庆市
2020/03/11 无线电
php中用数组的方法设置cookies
2011/04/21 PHP
判断PHP数组是否为空的代码
2011/09/08 PHP
php中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
JavaScript基本对象
2007/01/11 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
2013/04/12 Javascript
jquery利用ajax调用后台方法实例
2013/08/23 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
jQuery实现折线图的方法
2015/02/28 Javascript
微信小程序 开发之全局配置
2017/05/05 Javascript
react 创建单例组件的方法
2018/04/26 Javascript
vue-cli项目中使用Mockjs详解
2018/05/14 Javascript
详解小程序输入框闪烁及重影BUG解决方案
2018/08/31 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
[01:02:46]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
[47:08]OG vs INfamous 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python解析模块(ConfigParser)使用方法
2013/12/10 Python
详解详解Python中writelines()方法的使用
2015/05/25 Python
python获取外网IP并发邮件的实现方法
2017/10/01 Python
18个Python脚本可加速你的编码速度(提示和技巧)
2019/10/17 Python
利用django model save方法对未更改的字段依然进行了保存
2020/03/28 Python
Python实现微信表情包炸群功能
2021/01/28 Python
浅析CSS3 用text-overflow解决文字排版问题
2020/10/28 HTML / CSS
Kate Spade美国官网:纽约新兴时尚品牌,以包包闻名于世
2017/11/09 全球购物
Marmot土拨鼠官网:美国专业户外运动品牌
2018/01/11 全球购物
《小石潭记》教学反思
2014/02/13 职场文书
教师节促销方案
2014/03/22 职场文书
优秀教师先进个人事迹材料
2014/08/31 职场文书
埃及王子观后感
2015/06/16 职场文书
2016中学教师读书心得体会
2016/01/13 职场文书
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers