js实现按钮开关单机下拉菜单效果

更新时间：2018年11月22日 11:22:52 作者：静遇。

这篇文章主要介绍了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实现自定义难度的扫雷游戏
这篇文章主要为大家详细介绍了原生js实现自定义难度的扫雷游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-01-01
webpack前端应用之基础打包实现
本文主要介绍了webpack前端应用之基础打包实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-02-02
前端技巧之js-md5的简单使用方法
这篇文章主要给大家介绍了关于前端技巧之js-md5的简单使用,js-md5是一种前端加密算法,用于在前端对密码等敏感信息进行加密,文中通过代码介绍的非常详细,需要的朋友可以参考下
2023-12-12
JS定时器不可靠的原因及解决方案
JavaScript中所有的任务分为同步任务与异步任务，同步任务，顾名思义就是立即执行的任务，它一般是直接进入到主线程中执行,这篇文章主要介绍了JS定时器不可靠的原因及解决方案,需要的朋友可以参考下
2022-01-01
js删除Array数组中指定元素的两种方法
下面小编就为大家带来一篇js删除Array数组中指定元素的两种方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
JavaScript实现滑块验证码
这篇文章主要为大家详细介绍了JavaScript实现滑块验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
一些技巧性实用js代码小结
实现页面最大化默认img图片屏蔽鼠标右键取消选取防止复制等实现代码。
2009-10-10
JavaScript学习笔记之ES6数组方法
ES6给数组添加了一些新特性，而这些新特性到目前为止完全可以运用到自己的业务层。在这一节中将总结有关于ES6给数组提供一些新特性的使用方法
2016-03-03
js实现的Easy Tabs选项卡用法实例
这篇文章主要介绍了js实现的Easy Tabs选项卡用法,以完整实例形式较为详细的分析了JavaScript鼠标事件动态操作页面元素样式的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-09-09
D3.js中data(), enter() 和 exit()的问题详解
相信大多数人对D3.js并不陌生。这是一个由纽约时报可视化编辑 Mike Bostock与他斯坦福的教授和同学合作开发的数据文件处理的JavaScript Library，全称叫做Data-Driven Documents，在d3.js中data(), enter() 和 exit()比较常见，下面给大家就这方面的知识给大家详解
2015-08-08