本文给出了一个用JS CSS实现多级菜单的折叠和展开效果的例子。分享给大家参考。具体如下：

这是一个用JS CSS实现的多级折叠菜单，可以折叠，也可以展开/折叠。它不引用任何外部文件，也不使用图片。虽然简单粗暴，但是核心的东西已经展现给大家了。正在研究折叠菜单的朋友，这个小例子可能正是你需要的，所以仔细研究一下。

运行效果截图如下：

在线演示地址如下：

http://demo . JB 51 . net/js/2015/js-CSS-simple-zdzk-menu-style-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www . w3 . org/TR/XHTML 1/DTD/XHTML L1-Transitional . DTD ' html xmlns=' http://www . w3 . org/1999/XHTML ' head title折叠菜单/title style # side _ navul { display : none }/style/dyhead bul id=' side _ nav ' lispan Menu/span ullia href='var nav 1s=navwrap . getelementsbytagname(' span ')；var nav 2s=navwrap . GetElementsBytagname(' ul ')；for(var i=0，len=nav 1s . length；伊琳；i ){ nav1s[i]。onclick=(函数(I){ return function(){ for(var j=0；jlenj){ nav 2s[j]. style . display=' none '；} nav 2s[I]. style . display=' block '；} })(I)} })))//////script/body/html希望这篇文章对你的JavaScript编程有所帮助。