这几天一直在研究Jquery的ui库的使用,今天下午终于搞定了,其实很简单,就是引用别人写好的函数 调用就可以了, 下面分享使用js自定义折叠效果,和使用Jquery创建
js自定义折叠效果;
JavaScript实现思路:
1,将所有的子菜单隐藏
2,触发事件时就传(this,id),区分显示的菜单
//部分html代码;
<h1 onclick="fun_1(this,'NO0','一')">+ 一级菜单</h1> <div id="NO0" class="no"> <h2 onclick="fun_1(this,'NO01','一')">+ 一级菜单A_1</h2> <ul id="NO01" class="no" > <li>- 一级菜单A_1_0</li> <li>- 一级菜单A_1_1</li> <li>- 一级菜单A_1_2</li> <li>- 一级菜单A_1_3</li> <li>- 一级菜单A_1_4</li> <li>- 一级菜单A_1_5</li> </ul> </div>
js代码:
<script type="text/javascript"> function fun_1(div1,id1,num){ var ids = document.getElementById(id1);//获取点击时的id if(!ids.style.display){ //如果是不显示的 ids.style.display='inherit'; //设置为显示 div1.innerHTML="- "+num+"级菜单"; //设置点击的菜单是那个 }else{ ids.style.display=''; div1.innerHTML="+ "+num+"级菜单"; } } </script>
代码已上传
2,使用Jquery函数库来实现折叠菜单;
由于使用的是Jquery库,所以需要引库,使用src=""
<head> <title>Destroydrop » Javascripts » Tree</title> <link rel="StyleSheet" href="dtree.css" type="text/css" /> <script type="text/javascript" src="dtree.js"></script> </head>
定义折叠菜单; 以上图显示的人力资源为例子
<script type="text/javascript"> <!-- d = new dTree('d'); //定义自己的节点和父节点(0,-1) d.add(0,-1,'菜单栏'); //定义自己的节点和父节点(4,0) d.add(4,0,'人力资源','example01.html'); d.add(308,4,'部门管理','example01.html'); d.add(309,4,'员工管理','example01.html'); document.write(d); //--> </script>
思路:在设置节点的时候设置自己的节点和自己所属的父节点
相关推荐
可以使用像jQuery这样的库来简化跨浏览器的兼容性问题,或者使用现代JavaScript特性并配合polyfills来支持老版本浏览器。 6. **响应式设计**:考虑到移动设备的屏幕尺寸,折叠菜单在小屏幕设备上尤为重要。通过媒体...
在本文中,我们将深入探讨如何使用jQuery创建一个垂直可折叠的菜单特效,这是一种常见的前端交互设计,能够增强网站用户体验。jQuery作为一个轻量级的JavaScript库,简化了DOM操作,使得实现这种效果变得容易且高效...
以上内容涵盖了使用 jQuery 创建展开折叠菜单的关键知识点,包括 jQuery 的基本使用、菜单结构设计、事件处理和动画效果。实践中,您可以根据具体需求调整和完善这些概念,创建出更加个性化的菜单插件。
`Jquery`是一个轻量级的JavaScript库,它简化了DOM操作、事件处理以及动画效果的创建。本示例主要探讨如何使用`Jquery`实现一个三级折叠菜单,提升用户体验。 首先,我们需要了解`Jquery`的基本用法。`Jquery`通过 ...
jQuery库以其简洁的API和强大的功能,使得动态交互变得更加容易,而折叠菜单就是其中之一。 首先,折叠菜单是一种节省空间的用户界面元素,允许用户通过点击或触摸来展开或收起子菜单项。它常见于导航栏、侧边栏或...
通过学习和分析这些代码,你可以更深入地理解如何利用 jQuery UI 创建手风琴菜单和折叠菜单,并将它们应用到自己的项目中。 总的来说,jQuery UI 的 accordion 和 collapse 组件是构建动态、交互式菜单的强大工具。...
"Jquery折叠菜单"是一个常见的功能,用于创建交互式的树形导航结构,使得用户可以方便地展开和折叠菜单项。这种功能在网站的侧边栏、导航栏或复杂的数据展示中尤为常见。 要实现一个jQuery折叠菜单,首先需要理解...
总之,使用jQuery创建面向对象的折叠菜单是一个高效且直观的过程。它利用了jQuery的事件处理和动画功能,使得我们可以快速地构建出具有交互性的用户界面,提高网站的可用性和吸引力。通过理解这个示例,你将能够应用...
jQuery作为一款轻量级的JavaScript库,提供了丰富的功能来简化DOM操作,使得创建动态、交互性强的树形菜单变得简单。本文将深入探讨如何使用jQuery实现多级树形分类折叠菜单,同时基于提供的"jQuery多级树形分类折叠...
而JavaScript文件(很可能包含jQuery库和自定义脚本)则负责实现交互效果,如动态显示和隐藏子菜单。 在HTML源码中,二级折叠菜单的结构通常是通过和元素构建的,每个一级菜单项下嵌套一个二级菜单的。jQuery的事件...
3. **JavaScript/jQuery交互**:当用户点击菜单项时,JavaScript函数会被调用,修改菜单项的样式或类,以实现展开和折叠的效果。可以使用`addClass()`和`removeClass()`方法添加或移除表示展开/折叠状态的CSS类。 4...
在本文中,我们将深入探讨如何使用jQuery来创建一个支持无限层级的多级菜单。这个话题对于Web开发人员,特别是初学者来说,是非常实用且有趣的,因为它可以帮助他们更好地理解和掌握前端交互设计。 首先,jQuery是...
本项目是关于创建一个"jQuery+Bootstrap手风琴折叠菜单代码"的实现,这种菜单通常被称为"手风琴菜单",因为它在展开和折叠时具有类似手风琴的动态效果。 首先,jQuery是一个轻量级的JavaScript库,它提供了丰富的...
而jQuery作为一款强大的JavaScript库,提供了丰富的功能来实现各种动态效果,包括垂直折叠导航。本篇将深入探讨如何利用jQuery创建一个动画垂直折叠的导航菜单。 首先,我们需要理解jQuery的基本用法。jQuery的核心...
在本文中,我们将深入探讨如何使用jQuery实现一个粉红色风格的手风琴折叠菜单栏,以及相关的JavaScript特效。手风琴菜单是一种常见的用户界面元素,它允许用户在一个有限的空间内展示和隐藏大量的分类内容,通常通过...
总结来说,jQuery竖排动画手风琴折叠菜单栏代码利用jQuery的事件处理和动画功能,结合CSS样式,实现了美观且交互性强的手风琴菜单。这种代码不仅可以提升网站的用户体验,也是网页设计师和开发者必备的技能之一。...
总结来说,"jQuery高亮二级缓冲折叠菜单"是通过jQuery库实现的一种交互式菜单设计,它结合了高亮效果、二级菜单、缓冲动画和折叠功能,为用户提供了一种直观且易于导航的网页体验。通过深入理解和熟练运用这些jQuery...
在IT行业中,jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本教程将详细讲解如何利用jQuery实现一个兼容各浏览器的左菜单无限折叠效果。 首先,我们需要了解...