点击空白处收起菜单实现方法
<div class="menuc"> <a href="javascript:" class="menu-item" tabindex="0">菜单</a> <div class="sub-menu"> <a href="https://www.bing.com/">子菜单跳转</a> <a href="javascript:;" onclick="onMsg()">子菜单触发事件</a> </div> </div> <script> function onMsg(e){ alert('触发事件') } </script>
方法1 :focus-within
.sub-menu { display: none; position: absolute; } .menuc:focus-within .sub-menu { display: block; }
方法2 :focus
.menu-item:focus ~ .sub-menu, .sub-menu:active{ display: block; }