jQuery 树形菜单（竖向点击和横向滑动）

最新推荐文章于 2020-12-24 11:49:48 发布

置顶 super牛牛

最新推荐文章于 2020-12-24 11:49:48 发布

阅读量5.9k

点赞数

分类专栏： jquery 文章标签： jquery 树形菜单

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/u012668297/article/details/22918211

版权

jquery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

效果图：

说明：竖向点击主菜单会显示子菜单

横向鼠标移至主菜单会显示子菜单

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>JQuery[菜单效果]</title>

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

<style type="text/css">
UL,LI {
   list-style: none;
}

/* 竖向菜单的子菜单缩进
* 横向菜单的子菜单不缩进
*/
UL #item {
   padding: 15;
   /*但IE浏览器不能缩进*/
   margin: 0;
}

UL {
   padding: 0;
   /*但IE浏览器不能缩进*/
   margin: 0;
}

.mainMenu,.crossMenu {
   font-size: 18px;
   width: 170px;
}

/*子菜单样式*/
LI {
   background-color: lightgreen;
}

A { /*取消链接的下划线*/
   text-decoration: none;
   /*子菜单缩进*/
   padding-left: 15px;
   display: block;
   display: inline;
   width: 70px;
   /*在所有的链接加3个像素的上边距和下边距*/
   padding-top: 3px;
   padding-bottom: 3px;
}

.mainMenu A,.crossMenu A { /*主菜单链接为白色*/
   color: hotpink;
}

.mainMenu LI A,.crossMenu LI A {
   color: indigo;
}

/*主菜单下的UL全部隐藏*/
.mainMenu UL,.crossMenu UL {
   display: none;
}

/*横向菜单*/
.crossMenu {
   float: left;
   font-size: 18px;
}

</style>

<script type="text/javascript">
   $(function() {
       $('.mainMenu > a').click(function() {
           //找到主菜单项的子菜单项
               var childMenu = $(this).next('ul');
               childMenu.slideToggle();
           });
       $('.crossMenu').hover(
               //卷帘效果
               function() {
                   $(this).children('ul').slideToggle();
               });
   });

</script>
   </head>

   <body>
       
       <ul>
           <li class="mainMenu">
               <a href="#">机构管理</a>
               <ul id="item" class="item">
                   <li>
                       <a href="email.jsp">添加机构</a>
                   </li>
                   <li>
                       <a href="#">修改机构</a>
                   </li>
                   <li>
                       <a href="#">查询机构</a>
                   </li>
               </ul>
           </li>
           <li class="mainMenu">
               <a href="#">部门管理</a>
               <ul id="item">
                   <li>
                       <a href="#">添加部门</a>
                   </li>
                   <li>
                       <a href="#">修改部门</a>
                   </li>
                   <li>
                       <a href="#">查询部门</a>
                   </li>
               </ul>
           </li>
           <li class="mainMenu">
               <a href="#">员工管理</a>
               <ul id="item">
                   <li>
                       <a href="#">添加员工</a>
                   </li>
                   <li>
                       <a href="#">修改员工</a>
                   </li>
                   <li>
                       <a href="#">查询员工</a>
                   </li>
               </ul>
           </li>
       </ul>
       <br />
       <hr />
       <br />

       
       <ul>
           <li class="crossMenu">
               <a href="#">机构管理</a>
               <ul>
                   <li>
                       <a href="#">添加机构</a>
                   </li>
                   <li>
                       <a href="#">修改机构</a>
                   </li>
                   <li>
                       <a href="#">查询机构</a>
                   </li>
               </ul>
           </li>
           <li class="crossMenu">
               <a href="#">部门管理</a>
               <ul>
                   <li>
                       <a href="#">添加部门</a>
                   </li>
                   <li>
                       <a href="#">修改部门</a>
                   </li>
                   <li>
                       <a href="#">查询部门</a>
                   </li>
               </ul>
           </li>
           <li class="crossMenu">
               <a href="#">员工管理</a>
               <ul>
                   <li>
                       <a href="#">添加员工</a>
                   </li>
                   <li>
                       <a href="#">修改员工</a>
                   </li>
                   <li>
                       <a href="#">查询员工</a>
                   </li>
               </ul>
           </li>
       </ul>
   </body>

</html>

说明：

show(),hide()方法可以用于显示或隐藏元素，没有参数的效果和修改css的display属性效果一样。参数可以是以毫秒为单位的数值，或者是’slow’,’normal’,fast’,都可以控制完成显示或隐藏需要的时间。注意这时动画效果是靠不断改变元素的宽度和高度来实现的。
⑥ toggle方法更为强大，可以省去判断元素是否显示、隐藏，直接让显示的元素隐藏起来，隐藏的元素显示出来。参数使用方法和show()和hide()相同；
⑦ slideDown、slideUp可以实现向下或向上卷动的效果，实际上是通过制定时间内修改元素的高度来实现动画效果。需要注意的是这两个方法参数如果为空的情况下和show()，hide()不同；
⑧ slideToggle和toggle达到类似的效果；

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 树形菜单（竖向点击和横向滑动）

效果图： JQuery[菜单效果] UL,LI { list-style: none;}/* 竖向菜单的子菜单缩进 * 横向菜单的子菜单不缩进 */UL #item { padding: 15; /*但IE浏览器不能缩进*/ margin: 0;
复制链接

扫一扫

专栏目录

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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