折叠菜单(jquery)
<html>
<head>
<meta charset="UTF-8">
<title>accordionMenu可折叠菜单</title>
<script src="js/jquery-3.3.1.min.js"></script>
<style type="text/css">
.div-outer {
border: 1px solid;
300px;
}
.cls-img {
margin-left: 200px;
}
</style>
<script>
$(function() {
//初始化
$(".cls-img").attr("src", "img/jt1.jpg");
$(".div-content").hide();
$(".cls-img").click(function() {
var src = $(".cls-img").attr("src");
if(src == "img/jt2.jpg") {
$(".div-content:visible").slideUp();
$(".cls-img").attr("src", "img/jt1.jpg");
} else {
$(".div-content:hidden").slideDown();
$(".cls-img").attr("src", "img/jt2.jpg");
}
});
});
</script>
</head>
<body>
<div class="div-outer">
<div style="background-color: gainsboro;">
图书分类
<img src="img/jt1.jpg" class="cls-img" />
</div>
<div class="div-content">
<table>
<tr>
<td>
<a href="#">管理学</a>
</td>
<td>
<a href="#">计算机</a>
</td>
</tr>
<tr>
<td>
<a href="#">市场营销</a>
</td>
<td>
<a href="#">道德与法</a>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>