阅读本篇文章大约花费您1-3分钟！
最近刚刚结束了数据库的课程设计，因为正好学了JavaWeb，就做了一个简单的管理系统，于是想着做一个菜单导航栏，可以将所有的功能都放在这个导航栏中，因为还没有学前端的框架，就直接用JS写了一个简单的效果：
今天就和大家分享一下这个简单的效果的制作方法吧!
一.准备工作
准备工作非常简单：
下载好JQuery，放在eclipse的WebContent下，也可以建一个文件夹放在里面。
官网下载地址：https://jquery.com/
二.开始操作啦
新建一个test.jsp文件，导入Jquery文件
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
然后，直接看代码吧
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
width: 250px;
}
.content {
margin-left: 20px;
margin-top: 10px;
width: 250px;
height: 300px;
background: #3E89C6;
padding: 5px;
border-radius: 10px;
}
ul {
list-style: none;
}
.subTitle {
width: 200px;
height: 35px;
background-color: silver;
border: 1px solid black;
border-radius: 5px;
}
.subTitle:hover {
background-color: yellow;
}
.item {
width: 200px;
margin: 10px;
}
#subItem {
width: 200px;
display: none;
}
li {
background-color: lightgray;
border: 1px solid black;
border-radius: 5px;
margin: 3px;
}
li:hover{
font-weight: bold;
}
</style>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function() {
$(".subTitle").click(function() {
var $temp = $(this).next();
if ($temp.css("display") == "none") {
$temp.css("display", "block");
} else {
$temp.css("display", "none");
}
});
$(".subTitle").hover(function() {
$(this).children("font").css("font-weight", "bold")
}, function() {
$(this).children("font").css("font-weight", "normal");
});
});
</script>
</head>
<body>
<div class="content">
<div class="item">
<div class="subTitle" height="100px">
<font size="4">标题1</font>
</div>
<div id="subItem">
<ul>
<li>子标题1</li>
<li>子标题2</li>
<li>子标题3</li>
</ul>
</div>
</div>
</div>
</body>
</html>原理也很简单，就是给标题1添加一个点击事件，然后切换子标题的display样就可以了。
为了稍微好看一点，我这里还在点击的同时加粗了标题的字体，在结合CSS样式，给点颜色，一个非常简单的导航菜单就做好了。加入标题只需要多写几个<div class="item">就可以，不要改变id,class等，只需要修改显示的内容就可以了。