如何使隐藏列表项中的链接可点击

Question

我正在为只有 Html 和 CSS 的响应式页面创建菜单。当页面小于 850px（对于平板电脑和手机）时，水平菜单会隐藏，用户必须单击按钮才能访问菜单。它是一个平滑滚动的单页。

但是，当您打开菜单时，链接不会点击。我注意到，当我取消隐藏菜单时，链接工作正常。如何使链接可点击？我认为这可能与另一个项目 "overlayed" 的链接有关。

任何帮助将不胜感激

/*********** 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

我认为一旦您单击 link，输入就会失去焦点，因此它们会再次隐藏。

我建议在单击时使用 jQuery 到 add/remove 和 class 并根据此调整 CSS（或者只是将 CSS 更改为jQuery).

示例如下：

$('#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>

还有一个link到一个fiddle：https://jsfiddle.net/mzLwg0xb/。

Answer 2

当您点击 link 时，图像输入将失去焦点（模糊）并且 link 消失 blur 事件发生在 click 事件之前，所以你不能在不存在的东西上使用 click。

对父级使用 :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 focus-within

对于没有 JS 和 focus-within 的解决方案，使用隐藏的单选按钮和 CSS 同级组合器 ~ 以及 :checked 伪 class。

/*********** 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>

如何使隐藏列表项中的链接可点击

How to make links in a hidden list items clickable

html

css

menu