一个基于jquery的TreeMenu和下拉式Menu菜单，代码很简单

最新推荐文章于 2024-04-21 10:03:39 发布
最新推荐文章于 2024-04-21 10:03:39 发布
阅读量7.7k 收藏 2
点赞数
分类专栏： 前端开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/crown_0726/article/details/42079689
版权

TreeMenu菜单

jquery用的1.x版本。

HTML代码为：

<!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>TreeMenu</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/treeMenu.js"></script>
<style type="text/css">
.menu{
	width:100px;
	height:25px;
	border:1px solid #000;
	cursor: pointer;
}
ul{
	width:100px;
	border:1px solid #900;
	display:none;
}
</style>
</head>
<body>
	<div class="menu" name="left_menu">
    	<a>菜单一</a>
    </div>
    <ul>
    	<li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
    <div class="menu" name="left_menu">
    	<a>菜单二</a>
    </div>
    <ul>
    	<li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
    <div class="menu" name="left_menu">
    	<a>菜单三</a>
    </div>
    <ul>
    	<li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
    <div class="menu" name="left_menu">
    	<a>菜单四</a>
    </div>
    <ul>
    	<li>111111</li>
        <li>222222</li>
        <li>333333</li>
        <li>444444</li>
    </ul>
</body>  
</html>

js代码为：

// JavaScript Document
$(document).ready(function() {
    $("div[name='left_menu'] a").click(function(){
		if ($(this).parent().next().is(":visible")){
			$(this).parent().next().slideUp(500);
		}else{
			//$(this).parent().next().slideToggle(500);
			$("ul").slideUp(500);
			$(this).parent().next().slideDown(500);
		}
	});
});


效果：


TreeMenu菜单

jquery用的1.x版本。

HTML代码为：

<!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>Menu</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/treeMenu.js"></script>
<style type="text/css">
.menu{
	width:150px;
	height:25px;
	float:left;
	border:1px solid #000;
	cursor: pointer;
	position:relative;
}
ul{
	width:150px;
	border:1px solid #900;
	margin:0px;
	padding:0px;
	display:none;
}
</style>
</head>
<body>
	<div class="menu" name="left_menu">
    	<a>菜单一</a>
		<ul style="position:absolute;top:25px;">
			<li>111111</li>
			<li>222222</li>
			<li>333333</li>
			<li>444444</li>
		</ul>
	</div>
	<div class="menu" name="left_menu">
    	<a>菜单一</a>
		<ul style="position:absolute;top:25px;">
			<li>111111</li>
			<li>222222</li>
			<li>333333</li>
			<li>444444</li>
		</ul>
	</div>
	<div class="menu" name="left_menu">
    	<a>菜单一</a>
		<ul style="position:absolute;top:25px;">
			<li>111111</li>
			<li>222222</li>
			<li>333333</li>
			<li>444444</li>
		</ul>
	</div>
	<div class="menu" name="left_menu">
    	<a>菜单一</a>
		<ul style="position:absolute;top:25px;">
			<li>111111</li>
			<li>222222</li>
			<li>333333</li>
			<li>444444</li>
		</ul>
	</div>
	<div class="menu" name="left_menu">
    	<a>菜单一</a>
		<ul style="position:absolute;top:25px;">
			<li>111111</li>
			<li>222222</li>
			<li>333333</li>
			<li>444444</li>
		</ul>
	</div>
	<div style="clear:both;"></div>
	<div style="width:800px;height:30px;background-color:green;"></div>
</body>  
</html>

jquery代码为：


// JavaScript Document
$(document).ready(function() {
    $("div[name='left_menu']").live('mouseenter',function(){
		$(this).find("ul").slideDown(500);
	});
	$("div[name='left_menu']").live('mouseleave',function(){
		$(this).find("ul").slideUp(500);
	});
	$("li").live('mouseenter',function(){
		$(this).attr('style',"background-color:red;");
	});
	$("li").live('mouseleave',function(){
		$(this).attr('style',"");
	});
});

效果：


Cao Lilu
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js TreeMenu 异步加载树形控件
05-05
这个控件是我在网上下载的，但它没有异步加载，所以自己就用jquery改写了下，现在拿出来共享下
html css js树形菜单,JS+CSS实现TreeMenu二级树形菜单完整实例
weixin_39719165的博客
06-04 454
本文实例讲述了JS+CSS实现TreeMenu二级树形菜单。分享给大家供大家参考。具体如下：这是一款二级树形菜单示例：CSS TreeMenu ，非常漂亮的树形菜单，用在网站右侧比较合适。运行效果截图如下：在线演示地址如下：具体代码如下：/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">二级树形菜单示例：CSS TreeMen...
MenuTree：一款强大的菜单树管理工具
最新发布
gitblog_00083的博客
04-21 273
MenuTree：一款强大的菜单树管理工具 项目地址:https://gitcode.com/wuruowuxin74/MenuTree 项目简介 MenuTree 是一个轻量级、易于集成的前端菜单树组件，旨在帮助开发者更高效地管理和展示多层级的数据结构，尤其适用于构建具有复杂导航系统的Web应用。该项目由 JavaScript 编写，支持 Vue.js 框架，并且提供了丰富的配置选项和自定义样式...
unigui tree menu
weixin_44672967的博客
03-19 630
【冒泡】小楼 2020-03-18 10:46:20 请教下，treeMenu能否设置滚动条，项目多的时候显示不下了 【活跃】凯旋而归洪 2020-03-18 11:12:05 tree menu 不要点三角标， 点一下item 就可以展开菜单， 记得群主有说过。要把哪个打开。。 【活跃】凯旋而归洪 2020-03-18 11:12:19 有记住的没。 【活跃】凯旋而归洪 2020-03-18 1...
jquery.tree.js树形导航菜单插件
11-20
jquery.tree.js树形导航菜单插件
jQuery实现树形结构菜单
赵佳敏的博客
12-02 1462
一、效果图 二、核心代码 树形结构菜单.html <script src="js/treemenu.js"></script> <script> //插件中的方法使用和配置 //使用Ajax后端返回菜单的数据 //下面用户可能设置相关配置 $("#menu").Init({ backGround: "#4667d8", color: '#fff', data: menu .
来自国外的30个基于jquery的Web下拉菜单
10-28
4. **Create the Fanciest Drop Down Menu You Ever Saw**：教程教你如何构建一个极具视觉吸引力的下拉菜单，利用jQuery和CSS创造出独特的用户体验。 5. **A Different Top Navigation**：这个插件提供了一种不同于...
四个漂亮的jquery menu
01-09
在网页设计中，jQuery Menu是一种常见的交互元素，用于创建动态、响应式的下拉导航菜单。jQuery库的强大功能和简洁API使得开发这样的菜单变得更加容易。本文将深入探讨标题为"四个漂亮的jquery menu"的相关知识点，...
jquery easyui 三级菜单导航
01-03
`jQuery EasyUI` 是一个基于 jQuery 的轻量级框架，它提供了丰富的组件和样式，简化了前端开发工作，包括创建复杂的界面如三级菜单导航。本文将深入探讨如何使用 `jQuery EasyUI` 实现这样的功能。 首先，我们要...
一个很好用的树形菜单
07-22
【标题】"一个很好用的树形菜单"指的是在网页设计中使用的一种交互式用户界面元素，即树状菜单（Tree Menu）。这种菜单通常用于显示层次结构的数据，比如网站导航、文件系统或数据库结构。dhtmlxtree是实现这一功能...
最简单树形下拉菜单
08-07
本文将详细讲解如何创建一个“最简单树形下拉菜单”，以及实现这个功能所需的关键技术。 首先，我们需要理解树形下拉菜单的基本构成。这种菜单通常由一个父节点（主菜单项）和多个子节点（次级菜单项）组成。当用户...
menu-tree：树视图样式菜单，是具有深度，子类别，具有打开和关闭级别功能的菜单，应用了称为递归的数据结构概念。 -火箭座
02-18
菜单树 树视图样式菜单是具有深度，带有子类别的菜单，具有打开和关闭级别的功能，并应用了称为递归的数据结构概念。 -火箭座
各种样式的js实现的treeMenu
08-16
各种样式的js实现的treeMenu,有图标
JS MenuTree 使用
07-26
NULL 博文链接：https://zhou-he.iteye.com/blog/658248
用JS实现一个TreeMenu效果分享
12-10
今天学的一点小东西和大家分享一下。 类似TreeMenu控件. 不废话直接代码： 代码如下: [removed] function control() {//定义函数 if (sMenus3[removed] == “+”) {//判断展开状态 ulMenu3.style.display = “block”;//如果是“+”号 则可以展开 sMenus3.innerText = “-“;//展开之后显示为减号 } else { ulMenu3.style.display = “none”;//如果为“-”号 则不能展开 sMenus3.innerT
vue + el-menu 实现菜单栏无限多层级分类
weixin_39897287的博客
08-16 1157
思路：数据格式须为数组内部多层嵌套模式，利用递归渲染菜单栏数据实现菜单多层级分类。 1.模拟菜单数据，引入封装组件 <template> <div class="container"> <el-container> <el-header>Header</el-header> <el-container class="container-body"> <el-aside clas
easyui menu tree 实现左侧菜单树
热门推荐
周振伟的博客
10-10 2万+
1.首先引入easyui 相关js和样式。 2.构建树      请求后台组装json数据格式。 封装菜单需要的几个基本属性。前台js接收返回的数据自动构建树！ 最重要的就是这个递归，根据一级目录，也就是所有的根节点，递归找他们的子节点，直至叶子节点。 权限集合，就是一个存在父子关系的菜单对象，根据父子关系，拼装成树。
vue element 实现树形菜单栏n层级分类,NavMenu menu
weixin_38422287的博客
02-23 2349
前言：项目有个需求，要实现多层文件夹的下拉。 思路：数据结构为数组多层级嵌套模式，需要利用递归渲染菜单栏数据实现菜单多层级分类。 什么是递归？ 定义：就是函数自己调用自己本身，或者在自己函数调用的下级函数中调用自己。 递归函数的使用要注意函数终止条件避免死循环； 递归的步骤 假设递归函数已经写好 寻找递推关系 将递推关系的结构转换为递归体 将临界条件加入到递归体中 了解什么是递归后开始着手敲代码； 1.首先 模拟菜单数据，引入封装组件，index.vue <template> <d
Java递归实现菜单树
DevNinja的博客
09-26 766
上述示例创建了一个菜单树，其中包含根菜单项"Root"，以及一级菜单项"Menu 1"和"Menu 2"。“Menu 1"下有二级菜单项"Submenu 1-1"和"Submenu 1-2”，“Menu 2"下有二级菜单项"Submenu 2-1"和"Submenu 2-2”。“Submenu 1-1"下有三级菜单项"Subsubmenu 1-1-1"和"Subsubmenu 1-1-2”，“Submenu 1-2"下有三级菜单项"Subsubmenu 1-2-1”。的类，用于表示菜单树。
点开下拉菜单之后,点击任何一个位置都可以关闭下拉菜单的jquery代码
04-28
下面是通过 jQuery 实现关闭下拉菜单的代码： ```javascript $(document).click(function(event) { // 如果点击的是下拉菜单中的元素，则不处理 if ($(event.target).closest('.dropdown-menu').length) return;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值