zoukankan      html  css  js  c++  java
  • JQuery案例:折叠菜单

    折叠菜单(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>
    
  • 相关阅读:
    C# 中的栈和堆
    C# 中的基本数值类型
    多个 .NET 框架
    简单介绍托管执行和 CLI
    C# 控制台输入和输出
    在 C# 中使用变量
    C# 语法基础
    LeetCode 1482. 制作 m 束花所需的最少天数
    C# 基础(更新中)
    圆形靶内的最大飞镖数量
  • 原文地址:https://www.cnblogs.com/tigerlion/p/11178790.html
Copyright © 2011-2022 走看看