这里简单讲解一下如何使用jQuery实现可点击伸缩与展开的菜单效果。
概述
这里将展示如何通过jQuery来实现一个可点击伸缩与展开的菜单效果，步骤如下：
- HTML结构：设置菜单的HTML结构，包含一级菜单和二级菜单。
- CSS样式：设置菜单的样式，使之具备可伸缩和展开的效果。
- jQuery脚本：通过jQuery脚本来实现菜单的点击伸缩与展开效果。
HTML结构
首先先来看一下需要实现的HTML结构，如下所示：
<div class="menu">
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1-1</a></li>
<li><a href="#">子菜单1-2</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单2-1</a></li>
<li><a href="#">子菜单2-2</a></li>
</ul>
</li>
</ul>
</div>
这里我们采用ul和li的层级嵌套方式来实现菜单的伸缩与展开。
CSS样式
接下来先给菜单设置一些基本样式，再添加一些控制展开和收缩的样式。如下所示：
.menu ul{
list-style:none;
margin:0;
padding:0;
}
/* 一级菜单 */
.menu > ul > li{
position:relative;
margin-bottom:1px;
background:#eee;
}
/* 二级菜单 */
.menu ul ul{
display:none;
}
.menu ul li ul li{
background:#fff;
}
/* 控制展开和收缩的样式 */
.submenu-open:before{
content: "-";
}
.submenu-closed:before{
content: "+";
}
这里先设置了一级菜单和二级菜单的样式，以及控制展开和收缩的样式。其中，通过:before伪元素来控制‘-’和"+"的显示。
jQuery脚本
这是关键部分了，下面就来介绍如何通过jQuery脚本实现可点击伸缩与展开的菜单效果。如下所示：
$(function(){
$('.menu li:has(ul)').addClass('submenu-closed').on('click', function(e) {
e.stopPropagation();
$(this).toggleClass('submenu-open').children('ul').slideToggle();
});
});
这里采用了事件委托的方式来监听li元素的点击事件，其中surround元素为class为menu的元素，语法为$('.menu')。通过获得点击的元素的子类来进行下一步操作。
示例说明
示例1
通过一个简单的示例来看一下具体的效果。首先，我们加入一个HTML文档，并引入jQuery库。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery菜单效果</title>
<style>
.menu ul{
list-style:none;
margin:0;
padding:0;
}
.menu > ul > li{
position:relative;
margin-bottom:1px;
background:#eee;
}
.menu ul ul{
display:none;
}
.menu ul li ul li{
background:#fff;
}
.submenu-open:before{
content: "-";
}
.submenu-closed:before{
content: "+";
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$('.menu li:has(ul)').addClass('submenu-closed').on('click', function(e) {
e.stopPropagation();
$(this).toggleClass('submenu-open').children('ul').slideToggle();
});
});
</script>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1-1</a></li>
<li><a href="#">子菜单1-2</a></li>
</ul>
</li>
<li><a href="#">菜单2</a>
<ul>
<li><a href="#">子菜单2-1</a></li>
<li><a href="#">子菜单2-2</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
示例2
接下来为了证明示例1的正确运行，将增加一个更加复杂的菜单，包含多级伸缩和展开菜单。如下所示：
<div class="menu">
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1-1</a></li>
<li><a href="#">子菜单1-2</a></li>
<li><a href="#">子菜单1-3+</a>
<ul>
<li><a href="#">子菜单1-3-1</a></li>
<li><a href="#">子菜单1-3-2</a></li>
<li><a href="#">子菜单1-3-3+</a>
<ul>
<li><a href="#">子菜单1-3-3-1</a></li>
<li><a href="#">子菜单1-3-3-2</a></li>
<li><a href="#">子菜单1-3-3-3+</a>
<ul>
<li><a href="#">子菜单1-3-3-3-1</a></li>
<li><a href="#">子菜单1-3-3-3-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单2+</a>
<ul>
<li><a href="#">子菜单2-1</a></li>
<li><a href="#">子菜单2-2</a></li>
<li><a href="#">子菜单2-3+</a>
<ul>
<li><a href="#">子菜单2-3-1</a></li>
<li><a href="#">子菜单2-3-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
同样的操作，将其包含进示例1中，结果如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery菜单效果</title>
<style>
.menu ul{
list-style:none;
margin:0;
padding:0;
}
.menu > ul > li{
position:relative;
margin-bottom:1px;
background:#eee;
}
.menu ul ul{
display:none;
}
.menu ul li ul li{
background:#fff;
}
.submenu-open:before{
content: "-";
}
.submenu-closed:before{
content: "+";
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
$('.menu li:has(ul)').addClass('submenu-closed').on('click', function(e) {
e.stopPropagation();
$(this).toggleClass('submenu-open').children('ul').slideToggle();
});
});
</script>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">菜单1</a>
<ul>
<li><a href="#">子菜单1-1</a></li>
<li><a href="#">子菜单1-2</a></li>
<li><a href="#">子菜单1-3+</a>
<ul>
<li><a href="#">子菜单1-3-1</a></li>
<li><a href="#">子菜单1-3-2</a></li>
<li><a href="#">子菜单1-3-3+</a>
<ul>
<li><a href="#">子菜单1-3-3-1</a></li>
<li><a href="#">子菜单1-3-3-2</a></li>
<li><a href="#">子菜单1-3-3-3+</a>
<ul>
<li><a href="#">子菜单1-3-3-3-1</a></li>
<li><a href="#">子菜单1-3-3-3-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">菜单2+</a>
<ul>
<li><a href="#">子菜单2-1</a></li>
<li><a href="#">子菜单2-2</a></li>
<li><a href="#">子菜单2-3+</a>
<ul>
<li><a href="#">子菜单2-3-1</a></li>
<li><a href="#">子菜单2-3-2</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
总结
通过这个实例，我们学会了使用jQuery来实现可点击伸缩和展开的菜单效果，也加深了对jQuery的基本语法的理解。希望对大家有所帮助。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery实现可点击伸缩与展开的菜单效果代码 - Python技术站
微信扫一扫 
支付宝扫一扫 