標籤：html blog idt length oat ide code shadow isp
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .menu_level1{ width:500px; height:auto; margin:50px auto; } .menu_level1>li{ position: relative; float: left; list-style-type: none; height:30px; } .menu_level1>li>a{ padding:10px 15px; font-size:16px; } .menu_level2{ position:absolute; top:30px; left:0; padding:20px; height:100px; background-color:#fff; border:1px solid #ccc; border-radius:5px; box-shadow: 2px 2px 2px #eee; display: none; } .menu_level1>li:hover{ background-color:pink; } </style></head><body> <ul class="menu_level1"> <li><a>哈哈</a></li> <li><a>嘿嘿</a></li> <li><a>呼呼</a></li> <li><a>點我</a> <div class="menu_level2">哈羅，我是一塊板磚，哪裡需要哪裡搬。。。。。</div> </li> </ul></body><script src="jquery-3.2.1.min.js"></script><script> $(".menu_level1 li").click(function(){ $(".menu_level2").show(); }); $(document).click(function(e){ var target = $(e.target); if(target.closest(".menu_level1").length != 0) return; $(".menu_level2").hide(); });</script></html>
以上代碼是用jQuery實現的，用angular的方法還沒實現
jQuery 點擊任意處隱藏，除某個元素外
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
