單擊該菜單內的錨鏈接時，如何使焦點菜單保持打開狀態？

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>