html:原生javascript+css实现折叠层级菜单

前言

  今天来跟大家分享一下如何制作一个网页中的左侧菜单,这个功能对于网页来说也是常用的功能之一,相当于书签一样的功能。那么今天我们就来说一说如何实现一个折叠层级菜单的功能。
  那么折叠层级菜单长什么样?下面我们来直观的看一下,如下图所示就是一个简单的层级菜单,共有四个菜单选项,选择哪一个选项就对应地菜单下面相应的内容,如下截图所示:

  那么对于这样的层级菜单如何实现呢?用原生的javascript+css就可以来实现,而且实现起来也不是很难,这里主要是通过用css对菜单定义两种状态,一个用于折叠时显示,另一个用于展开时显示,而这两个状态的切换则使用JavaScript的单击响应函数来完成。在用JavaScript做状态切换时,我这里使用的是排他思想,也就当前点击的菜单是一种状态,其他的都是另一种状态,而实现排他思想的手段则是双重for循环和自定义属性。下面来看一下具体如何实现吧,具体代码如下:



    折叠层级菜单
    

    


    


  上面的代码实现了折叠层级菜单的功能,共有四个主菜单,每个菜单下又隐藏若干子菜单,当单击某个菜单时会打开该菜单下面的子菜单,再次单击该菜单会隐藏下面的子菜单,还有就是菜单之间是互斥的,即打开一个菜单会关闭其他的菜单。最终效果如下所示:

最后

  对于折叠层级菜单,网上的很多帖子都是使用 jQuery库来实现,而本贴使用的是原生JavaScript+css结合双重for手段来具体实现。emm,今天就分享到这里了。

你可能感兴趣的:(html:原生javascript+css实现折叠层级菜单)