下拉菜单(css、jq)

最新推荐文章于 2022-09-12 01:08:12 发布

spfLinux

最新推荐文章于 2022-09-12 01:08:12 发布

阅读量253

点赞数

分类专栏： jQuery css 文章标签：下拉菜单 css jq

css 同时被 2 个专栏收录

45 篇文章 0 订阅

订阅专栏

jQuery

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>...</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;
			/* border:1px solid #aaa; */
			box-shadow:5px 5px 6px #000;
			height: 0;
			overflow: hidden;
			transition: .2s;
			/* display: none; */
		}
		.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]").click(e=>{
			if($(e.target).next().css("height")=="0px"){ //px不能少
				$(e.target).next().css({
					height:152,
					border:"1px solid #000"
				});
			}
			else{
				$(e.target).next().css({
					height:0,
					border:""
				});
			}
		});
	</script>
 </body>
</html>

---------------------------------------------------------------------------------

//再实现鼠标移入下拉
   	 	$("[data-toggle=dropdown]").parent() 
   	 	//不能用e.target，因为e.target会变
   	 	.mouseover(function(){
   	 		//this会指冒泡出的那个，不会变
			$(this).children(".dropdown-menu").css({
				height:152,
				border:"1px solid #000"
			});
		}).mouseout(function(){
			$(this).children(".dropdown-menu").css({
				height:0,
				border:""
			});
		});