13

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

这样做有很多选择：

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

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

  3. using :targetbut 有与 :focus 相同的问题，不会触发第二个 hoover。

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>

4

10 回答 10

4

快速检查：工作 JSFiddle

有人可以帮助我解释为什么当我单击下拉菜单中的链接时它们不起作用？也许是因为指针事件？

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

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

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

I saw other answers which you seem to be interested in and this really doesn't need any kind of hack, It can be done by just formatting your HTML and with some CSS changes.

解决方案：li.test1您可以使用两个不同li的 ，而不是将内部菜单链接包裹在 内，一个X CLose用于保存menu links. 有了这个，我们可以确保当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 的跨域安全限制策略导致控制台中出现此错误

Refused to display 'https://www.google.co.in/?gfe_rd=cr&ei=x2VWWLL2Ae-K8Qfwx4ngDQ' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

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

希望这可以帮助！！

于 2016-12-18T10:10:56.143 回答
4

我通常会使用 JS 来做到这一点 - 但使用 CSS 有一个hack：

首先创建一个带有 idclose和 a的输入label来包装我们的关闭按钮：

  <input type="radio" id="close" />
  <li class="test1">
    <label for="close">
      <a class="dropdown" href="#">X Close</a>
    </label>

并添加此样式而不是当前样式.test1:active：

.container:hover #close:active + .test1{
  display: none;
}
#close {
  display: none;
}

请参阅下面的演示：

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;
}
#close {
  display: none;
}
.container:hover #close:active + .test1 {
  display: none;
}
a {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}
<ul class="container">
  Drop down menu
  <input type="radio" id="close" />
  <li class="test1">
    <label for="close">
      <a class="dropdown" href="#">X Close</a>
    </label>
    <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>

但是上面的代码input在 a 中有一个无效元素ul- 以防止您可以稍微编辑标记以创建另一个包装器ul（可能由于标记更改，您必须稍微调整宽度/填充） - 请参见下面的代码：

body {
  padding: 20px;
}
.container {
  border: 1px solid lime;
  padding: 10px;
}
ul {
  width: 200px;
}
.test1 {
  display: none;
  border: 1px dashed orange;
  background: green;
  padding: 10px;
  pointer-events: none;
}
.container:hover .test1 {
  display: inline-block;
}
#close {
  display: none;
}
.container:hover #close:active + ul > li.test1 {
  display: none;
}
a {
  pointer-events: auto;
  color: lime;
  font-weight: bold;
}
<div class="container">
  Drop down menu
  <input type="radio" id="close" />
  <ul>
    <li class="test1">
      <label for="close">
        <a class="dropdown" href="#">X Close</a>
      </label>
      <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>
</div>

于 2016-12-14T10:17:11.250 回答
1

我建议删除

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

当您单击“X Close”链接时，找到另一种方法（几行 javascript 即可）关闭面板。（顺便还修复了一些 html 缺失的标签）。现在链接正在工作：

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;
}
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>
  </li>
</ul>

于 2016-12-09T14:26:40.137 回答
1

您可以使用labeland buttonin place ona关闭链接，并且可以执行以下操作 - 

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;
}

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

/* close button */
#xclose:active + .test1 {
  display:none;
}

#xclose {
  display: none;
}
<ul class="container">
  Drop down menu
  <button id="xclose">X close</button>
  <li class="test1">    
    <label class="dropdown" for="xclose">X Close</label>        
    <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>

希望这会以某种方式对您有所帮助（y）。

于 2016-12-14T16:26:41.140 回答
1

它似乎不起作用，因为在鼠标按下时:hover，保持下拉菜单打开的 -class 消失了。所以鼠标向上事件不会在链接上执行，因为下拉菜单已经再次关闭，所以没有执行点击。您应该使用 javascript 打开和关闭下拉菜单。

于 2016-12-09T14:15:47.710 回答
0

我建议jQuery仅在按下链接时尝试使用来处理关闭容器。pointer-events有很多问题。因此，他们决定将该功能推迟到 CSS4。

我还认为pointer-events: none;可以防止任何点击事件被触发，因此仅将 jQuery 用于链接是行不通的。我认为您必须使用 jQuery 修复容器的打开和关闭。

于 2016-12-14T08:51:01.193 回答
0 
.container:hover .test1:active {
display: none;
}

改变这个喜欢

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

这里发生的情况是，当您的 div 从您的链接单击中获取“活动”伪代码时，它会在 DOM 冒泡到您的链接以提供重定向之前隐藏。将其更改为焦点可能允许点击实际通过？

于 2016-12-16T19:54:03.980 回答
0

一种选择是使用animate。我已经用你的代码给出了一个例子opacity。使用visibility:hiddenoroverflow:hidden将增强您的代码。





    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;
    }
    
    a {
        pointer-events: auto;
        color: lime;
        font-weight: bold;
    }


.container .test1 {
  -webkit-animation: seconds 1.0s forwards;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 2s;
  animation: seconds 1.0s forwards;
  animation-iteration-count: 1;
  animation-delay: 2s;
  position: relative;
}
@-webkit-keyframes seconds {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;

  }

@keyframes seconds {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;

  }
}


    <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>
于 2016-12-19T14:04:50.787 回答
0

为什么要添加"pointer-events: none;"到列表元素 .test1？这会覆盖您的pointer-events: auto;.Try 以将其删除，因为它会绑定您的点击事件。

于 2016-12-09T14:14:50.943 回答
0

在 CSS 中，您可以将label元素绑定到inputs. 鉴于此，您可以将关闭按钮绑定到一个输入，该输入在激活时会再次隐藏列表。

body{
  padding: 20px;
}

a, label{
  text-decoration: none;
  cursor: pointer;
  color: lime;
  font-weight: bold;
}

.container{
  border: 1px solid lime;
  padding: 10px;
  width: 200px;
}

.dropdown{
  display: none;
  border: 1px solid orange;
  background: green;
  margin-top: 10px;
  padding: 10px;
}

#close, #close:active + .dropdown{
  display: none;
}

.container:hover .dropdown{
  display: block;
}

.dropdown > ul{
  padding: 0;
  list-style: none;
}
<div class="container">
  Drop down menu
  <button id="close"></button>
  <div class="dropdown">
    <label for="close">X Close</label>
    <ul>
      <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>
  </div>
</div>

inputwith插入到列表之前，id="close"会被标签 withfor="close"
触发，当触发时，以下规则生效：

#close, #close:active + .dropdown{
  display: none;
}

这隐藏了列表。
但是当您将鼠标悬停在 上时.container，它会再次出现，允许您重复该过程。这里不需要不必要的 JavaScript。一个输入就可以了。

您的代码也有一些问题。你有文本Drop down menu并且CLOSE THIS CONTENT直接在一个里面ul，这是做不到的。Anul只能包含li'，不能包含其他内容。

希望这可以帮助

于 2016-12-16T00:08:43.957 回答