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 相关文章推荐
对new functionName()定义一个函数的理解
May 22 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
更高效的使用JQuery 这里总结了8个小技巧
Apr 13 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
详解vue与后端数据交互(ajax):vue-resource
Mar 16 Javascript
JS实现页面内跳转的简单代码
Sep 03 Javascript
vue.js项目中实用的小技巧汇总
Nov 29 Javascript
vue的常用组件操作方法应用分析
Apr 13 Javascript
Vue实现数据表格合并列rowspan效果
Nov 30 Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 Javascript
ElementUI 修改默认样式的几种办法(小结)
Jul 29 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
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文件读写操作之文件读取方法详解
2011/01/13 PHP
php使用imagecopymerge()函数创建半透明水印
2018/01/25 PHP
PHP简单实现记录网站访问量功能示例
2018/06/06 PHP
如何使用JS获取IE上传文件路径(IE7,8)
2013/07/08 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
js判断文本框剩余可输入字数的方法
2015/02/04 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
javascript的列表切换【实现代码】
2016/05/03 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
使用node.js对音视频文件加密的实例代码
2017/08/30 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
vuex实现登录状态的存储,未登录状态不允许浏览的方法
2018/03/09 Javascript
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
详解VSCode配置启动Vue项目
2019/05/14 Javascript
Vue之beforeEach非登录不能访问的实现(代码亲测)
2019/07/18 Javascript
js实现网页随机验证码
2020/10/19 Javascript
js实现复制粘贴的两种方法
2020/12/04 Javascript
[03:59]第二届DOTA2亚洲邀请赛选手传记-VGJ.rOtk
2017/04/03 DOTA
python线程锁(thread)学习示例
2013/12/04 Python
python安装与使用redis的方法
2016/04/19 Python
Python 基础教程之str和repr的详解
2017/08/20 Python
点球小游戏python脚本
2018/05/22 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python多线程+代理池爬取天天基金网、股票数据过程解析
2019/08/13 Python
tensorflow 实现打印pb模型的所有节点
2020/01/23 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
python实现人工蜂群算法
2020/09/18 Python
js正则匹配markdown里的图片标签的实现
2021/03/24 Javascript
医学生求职自荐信
2013/10/25 职场文书
三八活动策划方案
2014/08/17 职场文书
领导班子四风对照检查材料思想汇报
2014/09/26 职场文书
Html5生成验证码的示例代码
2021/05/10 Javascript
Redis中一个String类型引发的惨案
2021/07/25 Redis
pycharm安装深度学习pytorch的d2l包失败问题解决
2022/03/25 Python