當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

前台特效（9）无限极分类折叠菜单

發布時間：2024/4/15 编程问答 51 豆豆

生活随笔收集整理的這篇文章主要介紹了前台特效（9）无限极分类折叠菜单小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? ? ?在程序中經常會用到無限極分類菜單，經常性的會被繞的頭昏腦脹，整理了一個簡潔的方式，希望對你有幫助，輕噴！！

<!DOCTYPE html>

<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>選項1<ul><li>選項1-1<ul><li>選項1-1-1</li><li>選項1-1-2</li><li>選項1-1-3</li><li>選項1-1-4</li><li>選項1-1-5</li></ul></li><li>選項1-2<ul><li>選項1-2-1</li><li>選項1-2-2</li><li>選項1-2-3</li><li>選項1-2-4</li><li>選項1-2-5</li></ul></li><li>選項1-3</li><li>選項1-4</li><li>選項1-5</li></ul></li><li>選項2<ul><li>選項2-1<ul><li>選項2-1-1</li><li>選項2-1-2</li><li>選項2-1-3</li><li>選項2-1-4</li><li>選項2-1-5</li></ul></li><li>選項2-2</li><li>選項2-3</li><li>選項2-4</li><li>選項2-5</li></ul></li><li>選項3<ul><li>選項3-1<ul><li>選項3-1-1</li><li>選項3-1-2</li><li>選項3-1-3</li><li>選項3-1-4</li><li>選項3-1-5</li></ul></li><li>選項3-2</li><li>選項3-3</li><li>選項3-4</li><li>選項3-5</li></ul></li><li>選項4</li><li>選項5</li></ul></div></body> </html>

//----------------------------------------------by londd------------------------------------------------//

轉載于:https://www.cnblogs.com/longdidi/archive/2013/04/23/3037917.html

總結

以上是生活随笔為你收集整理的前台特效（9）无限极分类折叠菜单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。