单击该菜单内的锚链接时，如何使焦点菜单保持打开状态？

Question

1. 对焦时，会打开一个小菜单。
2. 单击菜单内的链接不应关闭它。
3. 在菜单区域外单击应关闭菜单。 就像失去焦点一样。

CSS可以吗？ 或者一点香草JS。

 [tabindex="1"] {display:inline-block;} b {cursor:pointer;} .menu { position:absolute; visibility:hidden; display:block; padding:10px; white-space:nowrap; border:1px solid black; background:pink; transition:0.35s ease-out; } [tabindex="1"]:focus .menu {visibility:visible;} p:target {background:gold;}

 <div tabindex="1"><b>&#9776;</b> <div class="menu"> <a href="#01">link 1</a> some text<br> some <a href="#02">link 2</a> text </div> </div> <br><br><br><br><br> <p id="01">Lorem ipsum dolor sit amet, consectetur ..</p> <p id="02">In lobortis nisl ac nisi tempor pulvinar..</p>

Answer 1

像这样的东西呢？

document.querySelector('[tabindex="1"]').addEventListener('click', function(){
    document.querySelector('.menu').classList.add('active')
})

单击外部时执行相同操作并删除活动类，还将您的 CSS 更改为类似这样

.menu.active  {visibility:visible;} 

外部点击：

document.addEventListener('click', ({ target }) => {
  if (!target.closest('.menu')) {
    document.querySelector('.menu').classList.remove('active')
  }
})

Answer 2

到目前为止，我正在使用这个解决方案。 使用 javascript。 在 IE 11.0 中工作。 如果有人在不使用 javascript 的情况下找到具有初始条件的解决方案，请告诉我。

 var ddc = document.querySelector(".drop"); var lnk = document.querySelectorAll("[href*='#']"); for (var i = 0; i < lnk.length; i++) { lnk[i].addEventListener("blur", function () { ddc.focus(); }); }

 .drop {display:inline-block; position:relative; outline:none;} b {cursor:pointer; font-size:18px; display:inline-block; width:20px;} .menu { visibility:hidden; opacity:0; position:absolute; top:120%; padding:10px; white-space:nowrap; border:1px solid black; background:pink; transition:0.55s ease-out; } .drop:focus .menu {visibility:visible; opacity:1;} p:target {background:gold;} b::before, b::after { position:absolute; top:0; left:0; line-height:1.0; transition:0.55s ease-out; } b::before {content: "\2630";} b::after {content: "\2715"; visibility:hidden; opacity:0;} .drop:focus b::before {visibility:hidden; opacity:0; transform:rotateZ(180deg);} .drop:focus b::after {visibility:visible; opacity:1;} i { position:absolute; cursor:pointer; top:0; right:0; bottom:0; left:0; z-index:10; opacity:0; display:none; } .drop:focus i {display:inline-block;} .drop i:focus .menu {visibility:hidden; opacity:0;}

 <div tabindex="1" class="drop"> <i tabindex="1"></i><b></b> <div class="menu"> <a href="#01">link 1</a> some text<br> some <a href="#02">link 2</a> text </div> </div> <br><br><br><br><br> <p id="01">Lorem ipsum dolor sit amet, consectetur ..</p> <p id="02">In lobortis nisl ac nisi tempor pulvinar..</p>