jQuery 下拉菜单显示和隐藏 - 知否问答 - 万象云+社区

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .link{ position: relative; padding-left: 50px; padding-top: 100px; } .link button{ width: 180px; height: 30px; background: gray; border: 1px solid transparent; border-radius: 4px; text-align: left; padding-left: 15px; cursor: pointer; color: #333; } .link button:hover{ background-color: #e6e6e6; border-color: #adadad; } .link button span{ display: block; width:0px; height:0px; border-top:10px solid #666; border-left:5px solid transparent; border-right:5px solid transparent; float: right; margin-top: 4px; margin-right: 10px; } .link ul{ position: absolute; display: none; top: 10px; left: 50px; z-index: 1000; float: left; min-width: 160px; padding: 5px 0; margin: 2px 0 0; font-size: 14px; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0,0,0,.15); border-radius: 4px; -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175); box-shadow: 0 6px 12px rgba(0,0,0,.175); } .link ul li{ line-height: 24px; } .link ul li>a{ padding-left: 10px; color: #333; width: 80%; display: inline-block; } </style> </head> <body> <div class="link"> <button type="button"> 友情链接 <span class="down-triangle"></span> </button> <ul> <li><a href="#">友情链接</a></li> <li><a href="#">友情链接</a></li> <li><a href="#">友情链接</a></li> </ul> </div> <script type="text/javascript" src="js/jquery-3.3.1.js" ></script> <script> $(".link button").click(function(){ if($(".link ul").css("display")=="none"){ $(".link ul").css("display","block"); }else{ $(".link ul").css("display","none"); } }); </script> </body> </html>

回答动态