javascript - 忽略落在 :before part of header element (jQuery) 上的点击

Question

我正在处理一个使用 Chris Coyier's method 的页面用于使散列标签链接与粘性导航一起正常工作。我正在扩展页面以使常见问题解答的标题可点击以显示/隐藏其内容。我的功能正常，但有一个相当大的问题。

h2:before 使标题的可点击区域比在某些地方点击时出现意外行为应有的大得多。 Here is a fiddle demonstrating the problem .我认为有一种方法可以使用点击坐标来执行此操作，但我无法完全理解我需要哪些元素以及来自哪些元素。

这感觉像是一个以前已经解决的问题，但我无法通过 SO 或 Google 找到任何东西，我现在正在处理它，但任何提示都将不胜感激。

编辑:非常感谢您的回答，很高兴有办法用 CSS 来做到这一点。将全面测试这两种方法并接受我使用的方法。

EDIT2:遗憾的是，虽然此页面上给出的所有解决方案都解决了孤立的问题(也没有任何组合)保留 anchor 链接/粘性导航行为。真气人! Krunal Panchal 的指针事件解决方案应该根据属性的作用工作，但除非结合也会破坏 # 链接的东西，否则不会。我想我将不得不用 Javascript 解决这个问题，当我找到答案时会发布答案。

EDIT3:用我自己的解决方案解决了。再次感谢您的帮助，尽管这个特殊问题似乎不能单独用 CSS 解决(尽管它可以在 fiddle 中)。

Answer 1

这是你的解决方案

使用 pointer-events : none 来实现这一点

代码:

h2:before {
    display: block;
    content:" ";
    margin-top: -70px;
    height: 70px;
    visibility: hidden;
    pointer-events : none;
} 

fiddle http://jsfiddle.net/krunalp1993/XwM4b/4/

冷却方式

fiddle http://jsfiddle.net/krunalp1993/XwM4b/5/

ie或旧浏览器的其他解决方案

h2:before {   
    z-index : -1;
}

fiddle http://jsfiddle.net/krunalp1993/XwM4b/6/

希望对你有帮助:)