前台特效（9）无限极分类折叠菜单
生活随笔
收集整理的這篇文章主要介紹了
前台特效（9）无限极分类折叠菜单
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ?在程序中經常會用到無限極分類菜單，經常性的會被繞的頭昏腦脹，整理了一個簡潔的方式，希望對你有幫助，輕噴！！
<!DOCTYPE html><!-- by longdd 2013.4.23-->
<html><head><title>無限極分類折疊菜單</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><style type="text/css">body{background-color:#B5BDBF;}.types ul{display:none;border: solid 1px #000;}.types li span{display:block;max-width: 150px;height: 30px;line-height: 30px;border:solid 1px #000;border-radius: 5px;margin: 5px;text-align: center;}.types>ul{display:block;}</style><script type="text/javascript" src="http://common.cnblogs.com/script/jquery.js"></script> <script type="text/javascript">$(function() {$('.types li').each(function(i) {$(this).click(function(event) {//阻止冒泡事件 event.stopPropagation();if ($(this).children('ul').css('display') === 'block') {$(this).children('ul').css('display', 'none');} else {$(this).children('ul').css('display', 'block');}});});});</script></head><body><div class="types"><ul><li><span>選項1</span><ul><li><span>選項1-1</span><ul><li><span>選項1-1-1</span></li><li><span>選項1-1-2</span></li><li><span>選項1-1-3</span></li><li><span>選項1-1-4</span></li><li><span>選項1-1-5</span></li></ul></li><li><span>選項1-2</span><ul><li><span>選項1-2-1</span></li><li><span>選項1-2-2</span></li><li><span>選項1-2-3</span></li><li><span>選項1-2-4</span></li><li><span>選項1-2-5</span></li></ul></li><li><span>選項1-3</span></li><li><span>選項1-4</span></li><li><span>選項1-5</span></li></ul></li><li><span>選項2</span><ul><li><span>選項2-1</span><ul><li><span>選項2-1-1</span></li><li><span>選項2-1-2</span></li><li><span>選項2-1-3</span></li><li><span>選項2-1-4</span></li><li><span>選項2-1-5</span></li></ul></li><li><span>選項2-2</span></li><li><span>選項2-3</span></li><li><span>選項2-4</span></li><li><span>選項2-5</span></li></ul></li><li><span>選項3</span><ul><li><span>選項3-1</span><ul><li><span>選項3-1-1</span></li><li><span>選項3-1-2</span></li><li><span>選項3-1-3</span></li><li><span>選項3-1-4</span></li><li><span>選項3-1-5</span></li></ul></li><li><span>選項3-2</span></li><li><span>選項3-3</span></li><li><span>選項3-4</span></li><li><span>選項3-5</span></li></ul></li><li><span>選項4</span></li><li><span>選項5</span></li></ul></div></body> </html>
//----------------------------------------------by londd------------------------------------------------//
轉載于:https://www.cnblogs.com/longdidi/archive/2013/04/23/3037917.html
總結
以上是生活随笔為你收集整理的前台特效（9）无限极分类折叠菜单的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [置顶] 推荐一款好用
- 下一篇： js中的类与对象