如何使隱藏列表項中的鏈接可點擊

Question

我正在為僅HTML和CSS的響應頁面創建菜單。 當頁面小於850px（適用於平板電腦和手機）時，水平菜單將隱藏，用戶必須單擊按鈕才能訪問菜單。 它具有平滑滾動的單個頁面。

但是，當您打開菜單時，鏈接不會單擊。 我注意到，當我取消隱藏菜單時，鏈接可以正常工作。 如何使鏈接可點擊？ 我認為這可能與鏈接被另一項“覆蓋”有關。

任何幫助將不勝感激

 /*********** HIDDEN MENU section *************/ #hidden-menu-items { display: none; position:absolute; z-index: 2; } /******* This displays the menu on click *******/ input[type=image]{ cursor: pointer; } input[type=image]:focus { outline: none; } input[type=image]:focus + ul#hidden-menu-items { display: block; } 

 Here's the HTML ``` <!-- Hidden Mobile Menu--> <div id="hidden-menu"> <input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button"> <!-- Hidden Menu Items--> <ul id="hidden-menu-items"> <li><a href="#title">About the avengers</a></li> <li><a href="#avengers">Meet our heros</a></li> <li><a href="#movies-list">Movie Timeline</a></li> <li><a href="">Upcoming Movies</a></li> </ul> </div> 

Answer 1

當您單擊鏈接時，圖像輸入將失去焦點（模糊），並且鏈接消失。模糊事件發生在click事件之前，因此您無法在不存在的對象上使用click。

在父:focus-within上使用:focus-within

 /*********** HIDDEN MENU section *************/ #hidden-menu-items { display: none; position: absolute; z-index: 2; } /******* This displays the menu on click *******/ input[type=image] { cursor: pointer; } #hidden-menu:focus-within { outline: none; } #hidden-menu:focus-within #hidden-menu-items { display: block; } 

 <!-- Hidden Mobile Menu--> <div id="hidden-menu"> <input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button"> <!-- Hidden Menu Items--> <ul id="hidden-menu-items"> <li><a href="#title">About the avengers</a></li> <li><a href="#avengers">Meet our heros</a></li> <li><a href="#movies-list">Movie Timeline</a></li> <li><a href="">Upcoming Movies</a></li> </ul> </div> 

但是：您不能使用焦點內在，因為您！ caniuse：CSS焦點內

對於沒有JS和focus-within的解決方案focus-within使用隱藏的單選按鈕和CSS同級組合器~以及:checked偽類。

 /*********** HIDDEN MENU section *************/ .hidden-menu-items { display: none; position: absolute; z-index: 2; } /******* This displays the menu on click *******/ .menu-button { cursor: pointer; } .menu-open-indicator, .menu-close-indicator { display: none; } .menu-open-indicator:checked ~ .menu-open, .menu-close { display: none; } .menu-open-indicator:checked ~ .menu-close, .menu-open-indicator:checked ~ .hidden-menu-items { display: block; } 

 <!-- Hidden Mobile Menu--> <div class="hidden-menu"> <input type="radio" name="menu-toggle" id="my-menu-open" class="menu-open-indicator"> <input type="radio" name="menu-toggle" id="my-menu-close" class="menu-close-indicator"> <label class="menu-open" for="my-menu-open"> <img src="images/menu-button-red-png.png" alt="menu-button" class="menu-button"> </label> <label class="menu-close" for="my-menu-close"> <img src="images/menu-button-red-png.png" alt="menu-button" class="menu-button"> </label> <!-- Hidden Menu Items--> <ul class="hidden-menu-items"> <li><a href="#title">About the avengers</a></li> <li><a href="#avengers">Meet our heros</a></li> <li><a href="#movies-list">Movie Timeline</a></li> <li><a href="">Upcoming Movies</a></li> </ul> </div> 

Answer 2

我認為，一旦您單擊鏈接，輸入內容就會失去焦點，因此它們再次被隱藏。

我建議使用jQuery在單擊時添加/刪除類並根據此方法調整CSS（或僅使用jQuery更改CSS）。

這是示例：

 $('#hidden-menu input').on('click', function(e) { $('#hidden-menu-items').toggleClass('visible'); }); 

 #hidden-menu-items { display: none; position: absolute; z-index: 2; } #hidden-menu-items.visible { display: block; } #hidden-menu { border: 1px solid pink; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="hidden-menu"> <input type="image" src="images/menu-button-red-png.png" alt="menu-button" class="menu-button"> <!-- Hidden Menu Items--> <ul id="hidden-menu-items"> <li><a href="#title">About the avengers</a></li> <li><a href="#avengers">Meet our heros</a></li> <li><a href="#movies-list">Movie Timeline</a></li> <li><a href="">Upcoming Movies</a></li> </ul> </div> 

以及指向小提琴的鏈接： https : //jsfiddle.net/mzLwg0xb/ 。