html - 仅使用 CSS 在悬停时显示下拉菜单并在单击时关闭

Question

有人能帮我解释一下为什么当我点击下拉菜单中的链接时它们不起作用吗？也许是因为指针事件？我试图让一个下拉菜单在单击链接或单击关闭按钮后关闭。我添加了一些很酷的东西，比如在单击链接时隐藏父容器。

有很多选择可以做到这一点:

1. 使用 :focus 但当焦点被使用时，下拉将不会 在下一次悬停在下拉菜单上时触发。

2. 在容器上使用 :active 并使用 pointer-events 仅指向 事件链接，但指针事件有问题

3. 使用:target 但是和:focus有同样的问题，不会触发 第二个胡佛。

body {
    padding: 20px;
}
.container {
    border: 1px solid lime;
    padding: 10px;
    width: 200px;
}
.test1 {
    display: none;
    border: 1px dashed orange;
    background: green;
    padding: 10px;
    pointer-events: none;
}
.container:hover .test1 {
    display: inline-block;
}
.container:hover .test1:active {
    display: none;
}
a {
    pointer-events: auto;
    color: lime;
    font-weight: bold;
}

<ul class="container">
	 Drop down menu
	<li class="test1">
	<a class="dropdown" href="#">X Close</a>
	<ul class="content">
		 CLOSE THIS CONTENT
		<li class="link"><a href="http://www.google.com">Go to link 1</a></li>
		<li class="link"><a href="https://www.google.co.uk">Go to link 2</a></li>
		<li class="link"><a href="https://www.google.co.uk">Go to link 3</a></li>
	</ul>

Answer 1

快速检查: Working JSFiddle

Can someone help me with an explanation as to why the links from a dropdown menu are not working when I click on them? Maybe because of pointer events?

解释此行为的原因: 是的，你是对的，这是因为你使用 :active 选择器逻辑的方式，要详细解释，请考虑你的这个 CSS 规则

.container:hover .test1:active {
    display: none;
}

您的菜单链接位于主 li.test1 下，对内部链接的任何点击也会冒泡到此元素，因此与点击 li。因此，只要按住鼠标(鼠标按下事件)，它就会触发 :active 事件，并且您隐藏了 links(即:li.test1), 但是只有当鼠标同时按下和向上时点击事件才完成。所以现在 li 已隐藏，mouse up 不再位于链接上。因此，如您所见，没有机会触发点击事件。这就是问题所在。

---

我看到了您似乎感兴趣的其他答案，这真的不需要任何类型的 hack，只需格式化您的 HTML 并更改一些 CSS 即可完成。

---

解决方案:与其将内部菜单链接包含在 li.test1 中，不如使用两个不同的 li ，一个用于X CLose，另一个用于保存菜单链接。有了这个，我们可以确保每当 li.test1 处于事件状态时(即鼠标按下)我们可以隐藏它以及其他新的li 与它相邻。因此，这意味着只要用户点击 X Close li，我们就会隐藏菜单，如果他点击其他菜单项，您将被重定向。

所以你的 HTML 结构的变化应该是这样的

<ul class="container">
  Drop down menu
  <li class="test1">
    <a class="dropdown" href="#">X Close</a>
  </li>
  <li class="MenuLinks">
    <ul class="content">
      <!-- all your links go here-->
    </ul>
  </li>
</ul>

主要的 CSS 规则是

.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
  display: none;
}

下面是一个 SO 工作片段

body {
  padding: 20px;
}
.container {
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
  list-style-type: none;
}
.test1,
.MenuLinks {  
  display: none;
  border-color: orange;
  border-style: dashed;
  background: green;
  pointer-events: none;
}
.test1 {
  padding: 10px;
  border-width: 1px 1px 0px 1px;
}
.MenuLinks {
  border-width: 0px 1px 1px 1px;
}
.container:hover li {
  display: block;
}

/*Rule to hide both test1 and MenuLinks when X Close is clicked*/
.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
  display: none;
}


a {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}

<ul class="container">
  Drop down menu
  <li class="test1">
    <a class="dropdown" href="#">X Close</a>
  </li>
  <!--seperate li for close-->

  <li class="MenuLinks">
    <!--wrap all your menu items here-->
    <ul class="content">
      CLOSE THIS CONTENT
      <li class="link"><a href="http://www.google.com">Go to link 1</a>
      </li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 2</a>
      </li>
      <li class="link"><a href="https://www.google.co.uk">Go to link 3</a>
      </li>
    </ul>
    <li>
</ul>

---

注意:当您点击链接时出现黑屏是由于 google 的跨源策略安全限制导致控制台出现此错误

拒绝在框架中显示“https://www.google.co.in/?gfe_rd=cr&ei=x2VWWLL2Ae-K8Qfwx4ngDQ”，因为它将“X-Frame-Options”设置为“SAMEORIGIN”。

但是，当您点击链接时，您可以在网络选项卡中看到请求。

希望这对您有所帮助!