纯JQ+CSS漂亮的折叠树形目录菜单_css树结构菜单样式美化资源-CSDN文库

共5个文件

css：2个

png：1个

js：1个

5星 · 超过95%的资源需积分: 50 65 浏览量 2018-02-27 17:35:38 上传评论 2 收藏 66KB ZIP 举报

在网页设计中，目录菜单是组织和展示内容结构的关键元素，尤其对于大型网站或复杂的页面来说，树形目录菜单能够帮助用户快速导航到目标位置。本文将深入探讨如何使用jQuery（简称为JQ）和CSS来创建一个既美观又实用的折叠树形目录菜单。 jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互等任务。在创建折叠树形菜单时，jQuery可以帮助我们轻松实现菜单项的动态显示和隐藏，以及响应用户的点击事件。 CSS（层叠样式表）则负责菜单的外观设计，包括颜色、字体、布局以及过渡效果等。通过合理的CSS规则，我们可以让菜单看起来更专业且用户体验良好。在“纯JQ+CSS漂亮的折叠树形目录菜单”项目中，首先我们需要一个HTML结构来定义菜单的基本框架。每个菜单项通常包含一个父级标题（用于展开/折叠子菜单）和一个子菜单列表。例如： ```html <ul class="tree-menu"> <li> <a href="#">父级菜单1</a> <ul class="sub-menu" style="display:none;"> <li><a href="#">子菜单1.1</a></li> <li><a href="#">子菜单1.2</a></li> </ul> </li> <li> <a href="#">父级菜单2</a>  </li> </ul> ``` 接下来，使用CSS为菜单添加样式。我们可以设置背景色、边框、内边距、字体样式等，同时为展开和折叠状态定义不同的样式。例如： ```css .tree-menu { list-style: none; padding: 0; } .tree-menu li { position: relative; } .tree-menu a { display: block; padding: 0.5rem; text-decoration: none; } .sub-menu { display: none; margin-left: 1rem; } .sub-menu li { padding-left: 1rem; } .tree-menu li.open .sub-menu { display: block; } ``` 然后，用jQuery编写JavaScript代码来实现菜单的交互功能。这里主要涉及`click`事件监听器，以及切换子菜单的显示状态。以下是一个简单的示例： ```javascript $(document).ready(function() { $('.tree-menu > li').on('click', function(e) { e.preventDefault(); $(this).toggleClass('open'); $(this).find('.sub-menu').slideToggle(); }); }); ``` 在这个例子中，当用户点击父级菜单项时，`open`类被添加或移除，改变元素的样式，同时`.sub-menu`通过`slideToggle`动画方法进行展开或折叠。总结起来，创建一个“纯JQ+CSS漂亮的折叠树形目录菜单”需要HTML结构、CSS样式和jQuery脚本三者的结合。通过HTML定义菜单的层次关系，CSS负责美化菜单的视觉效果，而jQuery则实现了菜单的交互逻辑。这个项目不仅可以帮助你提高前端开发技能，也能为用户提供直观、易用的导航体验。

资源推荐

资源详情

资源评论

收起资源包目录

571517.com.zip （5个子文件）

shuxingzhedie

css

bootstrap.min.css 99KB

style.css 1KB

img

glyphicons-halflings.png 12KB

index.html 6KB

jquery-1.7.2.min.js 93KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>多级树形分类折叠菜单演示 - 源码之家</title>  <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />  <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> <script type="text/javascript"> $(function(){ $('.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); $('.tree li.parent_li > span').on('click', function (e) { var children = $(this).parent('li.parent_li').find(' > ul > li'); if (children.is(":visible")) { children.hide('fast'); $(this).attr('title', 'Expand this branch').find(' > i').addClass('icon-plus-sign').removeClass('icon-minus-sign'); } else { children.show('fast'); $(this).attr('title', 'Collapse this branch').find(' > i').addClass('icon-minus-sign').removeClass('icon-plus-sign'); } e.stopPropagation(); }); }); </script> </head> <body> <div class="tree well"> <ul> <li> Parent <a href="">Goes somewhere</a> <ul> <li> Child <a href="">Goes somewhere</a> <ul> <li> Grand Child <a href="">Goes somewhere</a> </li> </ul> </li> <li> Child <a href="">Goes somewhere</a> <ul> <li> Grand Child <a href="">Goes somewhere</a> </li> <li> Grand Child <a href="">Goes somewhere</a> <ul> <li> Great Grand Child <a href="">Goes somewhere</a> <ul> <li> Great great Grand Child <a href="">Goes somewhere</a> </li> <li> Great great Grand Child <a href="">Goes somewhere</a> </li> </ul> </li> <li> Great Grand Child <a href="">Goes somewhere</a> </li> <li> Great Grand Child <a href="">Goes somewhere</a> </li> </ul> </li> <li> Grand Child <a href="">Goes somewhere</a> </li> </ul> </li> </ul> </li> <li> Parent2 <a href="">Goes somewhere</a> <ul> <li> Child <a href="">Goes somewhere</a> </li> </ul> </li> </ul> </div> <div class="tree"> <ul> <li> 2013, Week 2 <ul> <li> Monday, January 7: 8.00 hours <ul> <li> <a href=""> 8.00 – Changed CSS to accomodate...</a> </li> </ul> </li> <li> Tuesday, January 8: 8.00 hours <ul> <li> 6.00 – <a href="">Altered code...</a> </li> <li> 2.00 – <a href="">Simplified our approach to...</a> </li> </ul> </li> <li> Wednesday, January 9: 6.00 hours <ul> <li> <a href=""> 3.00 – Fixed bug caused by...</a> </li> <li> <a href=""> 3.00 – Comitting latest code to Git...</a> </li> </ul> </li> <li> Wednesday, January 9: 4.00 hours <ul> <li> <a href=""> 2.00 – Create component that...</a> </li> </ul> </li> </ul> </li> <li> 2013, Week 3 <ul> <li> Monday, January 14: 8.00 hours <ul> <li> 7.75 – <a href="">Writing documentation...</a> </li> <li> 0.25 – <a href="">Reverting code back to...</a> </li> </ul> </li> </ul> </li> </ul> </div> </body> </html>

评论收藏

内容反馈