jquery二级树形菜单

最新推荐文章于 2021-08-20 12:00:44 发布
最新推荐文章于 2021-08-20 12:00:44 发布
阅读量533 收藏 1
点赞数
分类专栏： JQUERY学习 文章标签： jquery function div xhtml 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>jquery二级树形菜单</title>
<style type="text/css" >body {  
    margin: 50px;  
    font-family: Arial, Helvetica, sans-serif;  
}  
ul {  
    margin: 0;  
    padding: 0;  
}  
li {  
    list-style: none;  
}  
#menuTree {  
    background-color: #e5e5e5;  
    width: 180px;  
}  
#menuTree h3 {  
    background-color: #aaa;  
    margin: 0;  
    padding: 4px;  
    font-size: 12px;  
    cursor: pointer;  
    border-bottom: solid 1px #999;  
}  
#menuTree ul {  
    margin: 6px 12px;  
    font-size: 11px;  
}  
#menuTree div {  
    display: none;  
}  
#menuTree h3.blue {  
    background: #069;  
    color: #fff;  
}</style>  
  
<script type="text/javascript" src="js/jquery.js"></script>  
<script type="text/javascript">
<!--  
    $(document).ready(function(){  
        $("#menuTree h3").toggle(  
            function(){  
			    $(this).addClass("blue");
                $(this).next("div").show("normal"); 
				 
            },  
            function(){  
			    $(this).removeClass("blue");
                $(this).next("div").hide("normal");  
            }
        );  
    })  
// --></script>   
    </head>  
    <body>  
        <ul id="menuTree">  
            <li>  
                <h3>  
                    mainMenu 1  
                </h3>  
                <div>  
                    <ul>  
                        <li>  
                            <a href="#" mce_href="#" href="#" mce_href="#">subMenu 1</a>  
                        </li>  
                        <li>  
                            <a href="#" mce_href="#" href="#" mce_href="#">subMenu 2</a>  
                        </li>  
                        <li>  
                            <a href="#" mce_href="#" href="#" mce_href="#">subMenu 3</a>  
                        </li>  
                    </ul>  
                </div>  
            </li>  
            <li>  
                <h3>  
                    mainMenu 2  
                </h3>  
                <div>  
                    <ul>  
                        <li>  
                            <a href="#" mce_href="#" href="#" mce_href="#">subMenu 1</a>  
                        </li>  
                        <li>  
                            <a href="#" mce_href="#" href="#" mce_href="#">subMenu 2</a>  
                        </li>  
                        <li>  
                            <a href="#" mce_href="#" href="#" mce_href="#">subMenu 3</a>  
                        </li>  
                    </ul>  
                </div>  
            </li>  
            <li>  
                <h3>  
                    mainMenu 3  
                </h3>  
                <div>  
                    <ul>  
                        <li>  
                            <a href="#" mce_href="#" href="#" mce_href="#">subMenu 1</a>  
                        </li>  
                        <li>  
                            <a href="#" mce_href="#" href="#" mce_href="#">subMenu 2</a>  
                        </li>  
                        <li>  
                            <a href="#" mce_href="#" href="#" mce_href="#">subMenu 3</a>  
                        </li>  
                    </ul>  
                </div>  
            </li>  
        </ul>  
    </body> 
</html>


 

momoppcat
关注
专栏目录
JQuery【树形菜单】
暖暖冬阳
08-14 3400
JQuery代码： $(function(){ $('li:has(ul)') .click(function(event){ if (this == event.target) { if ($(this).children().is(':hidden')) { $
jQuery实现树形菜单
许达华的博客
08-18 4587
jQuery实现树形菜单 html代码： 树形菜单 中国人民 中国人民 中国人民 中国人民 加油香港 ...
jQuery多级下拉树状菜单
07-25
基于jquery的一个插件，使用这个插件可以很轻易的实现多级下拉树形菜单
jquery 简单二级树形菜单
征途人生&梦
10-24 1359
如图：
jquery二级树形菜单（test）
不要看啦不要看
05-12 3614
jquery二级树形菜单<!--body{margin:50px;font-family:Arial, Helvetica, sans-serif;}ul{margin:0;padding:0;}li{list-style:none;}#menuTree{background-color:#e5e5e5;width:180px;}#menuTree h3{b
CSS+DIV+JS树形2层菜单
管子（zero）的杂乱空间
09-09 1303
<!--google_ad_client = "pub-4490194096475053";/* 内容页,300x250,第一屏 */google_ad_slot = "3685991503";google_ad_width = 300;google_ad_height = 250;//--><script type="text/javascript"src="
html代二级菜单的实例,jquery实现树形二级菜单实例代码
weixin_30764401的博客
06-11 108
jquery实现的树形列表菜单(Menu Tree) .padding {height:300px;}This copyright notice must be kept untouched in the stylesheet atall times.The original version of this stylesheet and the associated (x)htmlis avail...
jquery实现树形二级菜单实例代码
10-26
树形菜单是一种常见的网页界面元素，它允许用户以层次结构的方式浏览和选择数据。对于网站或应用的导航系统，这种菜单提供了清晰的组织结构，使得用户能更轻松地找到所需的信息。 首先，我们需要了解基本的HTML结构...
基于jquery实现的树形菜单效果代码
11-22
在本文中，我们将深入探讨如何使用jQuery来实现一个树形菜单效果。树形菜单是一种常见的网页界面元素，它允许用户以层次结构的方式浏览和选择不同的选项。这种菜单通常用于网站的导航、文件管理器或者复杂的数据展示...
带复选框二级树形菜单.rar
10-18
在这个场景中，"带复选框二级树形菜单"是一个功能丰富的组件，它结合了jQuery技术，以实现用户友好的、可操作的二级树状结构。 首先，我们要理解什么是jQuery。jQuery是一个广泛使用的JavaScript库，它简化了HTML...
JS+CSS实现TreeMenu二级树形菜单完整实例
10-23
主要介绍了JS+CSS实现TreeMenu二级树形菜单,以完整实例形式较为详细的分析了JS二级树形菜单的节点元素操作技巧,非常简单实用,需要的朋友可以参考下
js树形导航菜单制作点击展开收缩二级菜单
11-20
js树形导航菜单制作点击展开收缩二级菜单
hovertree插件实现二级树形菜单（简单实用）
10-20
在本文中，我们将探讨一个名为hovertree的jQuery插件，该插件用于实现二级树形菜单。hovertree是一个模仿京东网站风格的树形菜单插件，它提供了两种主题样式：银色和绿色。通过使用hovertree插件，开发者可以轻松...
无限级下拉菜单（树形菜单，二级菜单）
Q18210994339的博客
01-01 351
不管是在导航栏还是顶部的功能条，基本都会用到二级菜单或者三级菜单等等，今天，就使用原生JS来实现这种功能，我个人加上了定时器，用户体验会更好。 HTML: 　　　1. 布局清晰 　　　2.　所有的li 都是相对定位 　　　3. 所有的子级列表ul 都是绝对定位 JS分析： 　　　1. 首先获取下拉菜单中的所以的li，然后遍历li，给每一个li加事件，清除定时器 ，不要忘...
用jQuery写的简单两级树形菜单
Leon_li
04-16 882
html> treeMenu http-equiv="content-type" content="text/html; charset=UTF-8"> rel="stylesheet" href="../../work/css/bootstrap.min.css"> src="../../work/js/jquery.js"> type="text/
树形菜单，二级菜单，带菜单收缩图标
weixin_46305078的博客
11-30 711
数据是从数据库中查询出来的 一般有二级菜单显示的话都会有一个字段用来存储父菜单的编号，pid是我的父菜单编号，一级菜单编父编号为0，二级菜单的父编号为父编号的id值 我的做法是，先查询出所有的一级菜单，然后存在一个数组中，再循环一级菜单去单个查询该菜单下的二级菜单，然后存在单独的一个list中，存在json里返回页面。 可以看到one是一级菜单，two是二级菜单，后面是数字是是一级菜单的id，也就是二级菜单的pid值，区分属于哪个一级菜单的子菜单。 <div class="per16">
jqery实现树形二级菜单
孟祥月的专栏
09-14 1859
直接上代码： jQuery实现的树形列表菜单(Menu Tree) - 分享JavaScript-sharejs.com .padding {height:300px;} /* ================================================================ This copyright notice must be kept
jquery学习笔记(四)-----jquery实现二级树状菜单
zxingchao2009的专栏------用博客记录技术成长的点点滴滴
01-07 127
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &
JS中如何制作二级菜单，（代码及重要思路，前半部分），querySelectorAll()、
Fantasc的博客
08-20 1109
制作二级菜单的代码如下（前半部分）： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
使用jQuery实现二级菜单栏的折叠效果
<title>jQuery点击展开收缩树形菜单 /* ...CSS样式省略... */ <!-- ...HTML结构省略... --> <script src="https://code.jquery.com/jquery-3.x.y.min.js"></script> $(document).ready(function() { $...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值