JQ坑1

ゝ一世哀愁。 2022-06-04 09:48 80阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		.dropdown{
    			width: 64px;
    			height: 20px;
    		}
    		.dropdown a{
    			text-decoration: none;
    			color: #000;
    			display: inline-block;
    		}
    		.dropdown>a{
    			border: 1px solid #000;
    			padding: 6px 12px;
    		}
    		.dropdown-menu{
    			width: 105px;
    			list-style: none;
    			margin:0;
    			padding: 0;
    			box-shadow: 5px 5px 6px #000;
    			height: 0;
    			overflow: hidden;
    			transition: .2s;
    		}
    		.dropdown-menu a{
    			padding: 6px 20px;
    			width: 160px;
    		}
    		.dropdown-menu li:hover{
    			background: #ddd;
    		}
    	</style>
    </head>
    <body>
    	<h1>下拉菜单</h1>
    	<div class="dropdown">
    		<a data-toggle="dropdown" href="">Dropdown</a>
    		<ul class="dropdown-menu">
    			<li><a href="#">选项1</a></li>
    			<li><a href="#">选项2</a></li>
    			<li><a href="#">选项3</a></li>
    			<li><hr></li>
    			<li><a href="#">选项4</a></li>
    		</ul>
    	</div>
    	
    	<script src="js/jquery.min.js"></script>
    	<script>
    		$("[data-toggle=dropdown]").parent()
    		.mouseover(function(){
    			//this会指冒泡出的那个，不会变|也是指.前的对象(parent())
    			//console.log("this="+this.className);
    			$(this).children(".dropdown-menu").css({
    				height:152,
    				border:"1px solid #000"
    			});
    		}).mouseout(function(){
    			$(this).children(".dropdown-menu").css({
    				height:0,
    				border:""
    			});
    		})
    	</script>
    </body>
    </html>