简单实现js点击展开二级菜单功能

虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的。我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下:

如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单。这里有两个点,实现展现和隐藏用display="block"和display="none",另外就是要做一个判断,if   else的判断当前是block还是none。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    #sub_menu_1,#sub_menu_2{
      display: none;
    }
    ul li:hover{
      cursor: pointer;
    }
  </style>
</head>
<body>
  <ul>
    <li onclick = "f('sub_menu_1')">一级菜单1
      <ul id="sub_menu_1">
        <li>二级餐单1</li>
        <li>二级餐单1</li>
        <li>二级餐单1</li>
        <li>二级餐单1</li>
      </ul>
    </li>
    <li onclick="f('sub_menu_2')">一级菜单2
      <ul id="sub_menu_2">
        <li>二级菜单2</li>
        <li>二级菜单2</li>
        <li>二级菜单2</li>
        <li>二级菜单2</li>
      </ul> 

    </li>
    <li>一级餐单3</li>
  </ul>
  <script type="text/javascript">
    function f(str){
        var sub_menu = document.getElementById(str);
        var dis_v = sub_menu.style.display; 

        if(dis_v == "block")
          sub_menu.style.display = "none";
        else
          sub_menu.style.display = "block"; 

      } 

  </script>
</body>
</html>

有个注意事项就是一级菜单的li不能添加a标签,不然会不起作用。
如果,你的页面默认进来二级菜单是展现的,点击时才关闭。直接把style标签的样式display="none"去掉就可以。同时需要修改一下js。

<script type="text/javascript">
    function f(str){
        var sub_menu = document.getElementById(str);
        var dis_v = sub_menu.style.display; 

        if(dis_v == "none")
          sub_menu.style.display = "block";
        else
          sub_menu.style.display = "none"; 

      } 

  </script>

仔细看,不然你就会发现你需要点击两次才会出现想要的效果。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • jquery实现可点击伸缩与展开的菜单效果代码

    本文实例讲述了jquery实现可点击伸缩与展开的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款jquery实现的点击伸缩与展开的菜单代码,操作方式大家都知道吧,点击一下展开二级菜单的内容,再次点击则合拢,很经典的折叠菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-click-show-hidden-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C/

  • js实现点击向下展开的下拉菜单效果代码

    本文实例讲述了js实现点击向下展开的下拉菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍js实现点击向下展开的下拉菜单特效代码,无调用jQuery,真正的JS下拉菜单,兼容性方面未做测试,觉得有用处的自己测试修正吧,本文仅提供基础的代码供参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-click-show-down-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//

  • jquery实现点击向下展开菜单项(伸缩导航)效果

    本文实例讲述了jquery实现点击向下展开菜单项(伸缩导航)效果.分享给大家供大家参考.具体如下: 这里演示基于jquery打造的向下展开的多级导航条效果,纵向垂直排列,风格非常的简洁,鼠标点击时候展开菜单的二级项,再次点击的时候又向上合拢,平时只显示一级菜单,二级菜单是隐藏不显示的,代码简洁,包括了完整的JS.css和jquery部分. 运行效果如下图所示: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-show-hidden-style-menu

  • ListView点击Item展开菜单实现代码详解

    一.概述 ListView点击item显示菜单是要实现这样的效果: 需要实现的逻辑如下: 1)点击一个普通item,展开当前菜单,同时关闭其他菜单 2)点击一个已展开的菜单,隐藏当前菜单 3)将展开菜单滑到listview之外,再滑动回来,展开菜单状态不变 4)点击菜单中的按钮,能够根据不同item进行不同的处理 二.实现思路 1.UI布局上,对于这种每个listitem都包含动态显示菜单的场景,可以直接在listitem的xml布局里就包含两部分元素:item本身以及展开菜单 点击item的时

  • 简单实现js点击展开二级菜单功能

    虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的.我最近就遇到做个点击展开二级菜单的要求,当然只能用原生的JS去写来实现,我借鉴了网上的一个案例,补充一下,分享一下: 如果,默认打开页面进来时二级菜单是隐藏的,需要点击才能展现二级菜单,再点击就是隐藏二级菜单.这里有两个点,实现展现和隐藏用display="block"和display="no

  • vue实现鼠标移过出现下拉二级菜单功能

    1.我曾经听一位快十年前端大佬说过一句话,就是能用css实现的动画,就用css不要用js去实现 因为在渲染上css肯定比js效果更好 我用jquery曾经实现过鼠标点击 出现下拉菜单 有点和面包屑 和标签页导航类似  后来参加工作了 公司一直在用vue 所以很多用jqeury写的项目都要用vue来重构 这其中不免碰见了有一些动画效果 虽然很简单 我也曾想着就用jquery去实现吧 代码多一点无所谓了 但最后却不是这样 vue好像和jquery中的有些插件冲突了  只要vue已导入 那些用jque

  • 用纯JS实现二级菜单效果

    本文实例为大家分享了JS实现二级菜单效果的具体代码,供大家参考,具体内容如下 js点击出现二级菜单,点击二级菜单主菜单换成二级菜单 点击出现二级菜单 <style> *{ margin:0px auto; padding:0px; } .yiji{ width:200px; height:40px; background-color:red; color:#fff; text-align:center; line-height:40px;h vertical-align:middle; bor

  • jquery实现点击展开列表同时隐藏其他列表

    本文实例讲述了jquery实现点击展开列表同时隐藏其他列表.分享给大家供大家参考.具体如下: 这里使用jquery实现展开.隐藏特效,点击列表标题后该项内容展开,其它项收缩起来,也就是不显示了.个人喜好了,有的喜欢在默认状态下不显示其它选项的内容,这个就是这种情况,仅供参考吧. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o

  • jquery+css实现的红色线条横向二级菜单效果

    本文实例讲述了jquery+css实现的红色线条横向二级菜单效果.分享给大家供大家参考.具体如下: 这是一款带导航的菜单,当前是哪一项菜单,会很个性的显示出来,鼠标放上后会显示菜单缺口,挺有意思的吧,希望大家喜欢. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-css-red-color-2row-nav-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • Vue.js 实现微信公众号菜单编辑器功能(二)

    Vue.js 实现微信公众号菜单编辑器功能(一)上一篇菜单的点击和添加菜单功能已经在模版实现了,接下来实现菜单的编辑功能 实现菜单删除方法 在vue实例中添加删除菜单方法,根据选中的菜单级别和索引来删除. methods: { //删除菜单 delMenu:function(){ //删除主菜单 if(this.selectedMenuLevel()==1&&confirm('删除后菜单下设置的子菜单也将被删除')){ if(this.selectedMenuIndex===0){ thi

  • js实现二级菜单点击显示当前内容效果

    最近做了一个二级菜单点击事件的效果,一级菜单有3个,二级菜单是固定的,而且html布局并不是父子级关系,具体请看效果图如下 html结构入下 <div> <ul> <li>您好!日期</li> <li class="li_list checked grounder">滚球</li> <li class="li_list">今日赛事</li> <li class=&q

  • JS+CSS实现的简单折叠展开多级菜单效果

    本文实例讲述了JS+CSS实现的可折叠展开多级菜单效果.分享给大家供大家参考.具体如下: 这是一款JS+CSS实现的多级折叠菜单,可折叠展开/合拢,没有引用任何的外部文件,也没有用到图片,虽然简单,而且还有些粗糙,但核心的东西已经展示给大家了,正在研究折叠菜单的朋友们,这一个小例子可能正是你需要的,好好研究一下吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-simple-zdzk-menu-style-codes/ 具体代码如

  • vue二级菜单导航点击选中事件的方法

    因为没有使用vue做一个真正完整的项目,所以乘着这个项目比较闲的时间,对标项目用vue做一些页面,丰富自己的项目经验.所以接下来基本都是一些简单的功能. 目标:一级导航点击收缩展开,二级导航点击选中 源码 主要是思路,具体的就不放了 <ul class="sidebar-menu"> <li class="treeNav" v-for="(item,index) in configNav"> <a href=&quo

随机推荐