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

/*********** 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伪类。

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

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

2 个答案: