`
百合不是茶
  • 浏览: 354162 次
社区版块
存档分类
最新评论

JavaScript自定义折叠菜单和使用Jquery函数库创建折叠菜单

阅读更多

这几天一直在研究Jquery的ui库的使用,今天下午终于搞定了,其实很简单,就是引用别人写好的函数 调用就可以了, 下面分享使用js自定义折叠效果,和使用Jquery创建

 

js自定义折叠效果;

 



 
 
 JavaScript实现思路:

     1,将所有的子菜单隐藏

     2,触发事件时就传(this,id),区分显示的菜单

//部分html代码;

 <h1 onclick="fun_1(this,'NO0','一')">+ &nbsp;一级菜单</h1>
 <div id="NO0" class="no">
   <h2 onclick="fun_1(this,'NO01','一')">+ &nbsp;一级菜单A_1</h2>
       <ul id="NO01" class="no" >
	        <li>- &nbsp;一级菜单A_1_0</li>
			<li>- &nbsp;一级菜单A_1_1</li>
			<li>- &nbsp;一级菜单A_1_2</li>
			<li>- &nbsp;一级菜单A_1_3</li>
			<li>- &nbsp;一级菜单A_1_4</li>
			<li>- &nbsp;一级菜单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="- &nbsp;"+num+"级菜单";	  //设置点击的菜单是那个
	 }else{
	ids.style.display='';   
	div1.innerHTML="+ &nbsp;"+num+"级菜单";
	 } 
  }

</script>

 

代码已上传

 

2,使用Jquery函数库来实现折叠菜单;



 由于使用的是Jquery库,所以需要引库,使用src=""

 

<head>
	<title>Destroydrop &raquo; Javascripts &raquo; 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>

 

思路:在设置节点的时候设置自己的节点和自己所属的父节点

 

  • 大小: 3.9 KB
  • 大小: 8.6 KB
  • 大小: 10.2 KB
  • 大小: 6.7 KB
0
0
分享到:
评论

相关推荐

    javascript可折叠菜单

    可以使用像jQuery这样的库来简化跨浏览器的兼容性问题,或者使用现代JavaScript特性并配合polyfills来支持老版本浏览器。 6. **响应式设计**:考虑到移动设备的屏幕尺寸,折叠菜单在小屏幕设备上尤为重要。通过媒体...

    jQuery的垂直可折叠菜单特效, 使用简单,只需要加载jquery插件。兼容主流浏览器

    在本文中,我们将深入探讨如何使用jQuery创建一个垂直可折叠的菜单特效,这是一种常见的前端交互设计,能够增强网站用户体验。jQuery作为一个轻量级的JavaScript库,简化了DOM操作,使得实现这种效果变得容易且高效...

    jquery展开折叠菜单插件

    以上内容涵盖了使用 jQuery 创建展开折叠菜单的关键知识点,包括 jQuery 的基本使用、菜单结构设计、事件处理和动画效果。实践中,您可以根据具体需求调整和完善这些概念,创建出更加个性化的菜单插件。

    Jquery三级折叠菜单示例

    `Jquery`是一个轻量级的JavaScript库,它简化了DOM操作、事件处理以及动画效果的创建。本示例主要探讨如何使用`Jquery`实现一个三级折叠菜单,提升用户体验。 首先,我们需要了解`Jquery`的基本用法。`Jquery`通过 ...

    jQuery实现折叠菜单 非常简单

    jQuery库以其简洁的API和强大的功能,使得动态交互变得更加容易,而折叠菜单就是其中之一。 首先,折叠菜单是一种节省空间的用户界面元素,允许用户通过点击或触摸来展开或收起子菜单项。它常见于导航栏、侧边栏或...

    用jquery UI实现的手风琴菜单、折叠菜单

    通过学习和分析这些代码,你可以更深入地理解如何利用 jQuery UI 创建手风琴菜单和折叠菜单,并将它们应用到自己的项目中。 总的来说,jQuery UI 的 accordion 和 collapse 组件是构建动态、交互式菜单的强大工具。...

    Jquery折叠菜单

    "Jquery折叠菜单"是一个常见的功能,用于创建交互式的树形导航结构,使得用户可以方便地展开和折叠菜单项。这种功能在网站的侧边栏、导航栏或复杂的数据展示中尤为常见。 要实现一个jQuery折叠菜单,首先需要理解...

    JQuery 折叠菜单

    总之,使用jQuery创建面向对象的折叠菜单是一个高效且直观的过程。它利用了jQuery的事件处理和动画功能,使得我们可以快速地构建出具有交互性的用户界面,提高网站的可用性和吸引力。通过理解这个示例,你将能够应用...

    jQuery多级树形分类折叠菜单.zip

    jQuery作为一款轻量级的JavaScript库,提供了丰富的功能来简化DOM操作,使得创建动态、交互性强的树形菜单变得简单。本文将深入探讨如何使用jQuery实现多级树形分类折叠菜单,同时基于提供的"jQuery多级树形分类折叠...

    jQuery产品分类二级折叠菜单.zip

    而JavaScript文件(很可能包含jQuery库和自定义脚本)则负责实现交互效果,如动态显示和隐藏子菜单。 在HTML源码中,二级折叠菜单的结构通常是通过和元素构建的,每个一级菜单项下嵌套一个二级菜单的。jQuery的事件...

    仿outlook 折叠菜单折叠菜单

    3. **JavaScript/jQuery交互**:当用户点击菜单项时,JavaScript函数会被调用,修改菜单项的样式或类,以实现展开和折叠的效果。可以使用`addClass()`和`removeClass()`方法添加或移除表示展开/折叠状态的CSS类。 4...

    jQuery+Bootstrap手风琴折叠菜单代码

    本项目是关于创建一个"jQuery+Bootstrap手风琴折叠菜单代码"的实现,这种菜单通常被称为"手风琴菜单",因为它在展开和折叠时具有类似手风琴的动态效果。 首先,jQuery是一个轻量级的JavaScript库,它提供了丰富的...

    jQuery动画垂直折叠导航效果

    而jQuery作为一款强大的JavaScript库,提供了丰富的功能来实现各种动态效果,包括垂直折叠导航。本篇将深入探讨如何利用jQuery创建一个动画垂直折叠的导航菜单。 首先,我们需要理解jQuery的基本用法。jQuery的核心...

    jquery插件——多级菜单

    在本文中,我们将深入探讨如何使用jQuery来创建一个支持无限层级的多级菜单。这个话题对于Web开发人员,特别是初学者来说,是非常实用且有趣的,因为它可以帮助他们更好地理解和掌握前端交互设计。 首先,jQuery是...

    jQuery动画手风琴折叠菜单栏代码.zip

    在本文中,我们将深入探讨如何使用jQuery实现一个粉红色风格的手风琴折叠菜单栏,以及相关的JavaScript特效。手风琴菜单是一种常见的用户界面元素,它允许用户在一个有限的空间内展示和隐藏大量的分类内容,通常通过...

    jQuery竖排动画手风琴折叠菜单栏代码.zip

    总结来说,jQuery竖排动画手风琴折叠菜单栏代码利用jQuery的事件处理和动画功能,结合CSS样式,实现了美观且交互性强的手风琴菜单。这种代码不仅可以提升网站的用户体验,也是网页设计师和开发者必备的技能之一。...

    jQuery高亮二级缓冲折叠菜单

    总结来说,"jQuery高亮二级缓冲折叠菜单"是通过jQuery库实现的一种交互式菜单设计,它结合了高亮效果、二级菜单、缓冲动画和折叠功能,为用户提供了一种直观且易于导航的网页体验。通过深入理解和熟练运用这些jQuery...

    jQuery左菜单无限折叠

    在IT行业中,jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本教程将详细讲解如何利用jQuery实现一个兼容各浏览器的左菜单无限折叠效果。 首先,我们需要了解...

Global site tag (gtag.js) - Google Analytics