如何在禁用单击时保持悬停属性

Question

所以我有这个列表,通过CSS添加了一些悬停效果.HTML:

<li><a href="#">Current Period</a>
  <ul>
        <li><a href="#">2012</a>
        <li> a href="#">2011</a> //...you get the point

CSS:

#nav a:hover {
    background-color: #fff;
    color: #333;
}

当用户在当前周期中悬停时,将显示子元素列表(2012年,2011年......其中包含自己的子元素).我的问题是用户可以点击"当前期间".我已设法通过向锚添加类来删除单击,如下所示:

<li><a href="#" class="noclick">Current Period</a> ....

CSS:

.noclick { pointer-events: none; cursor: default; }

但这当然会消除悬停功能.我想保持悬停效果,同时使按钮不可点击(我在想javascript,但我想要一个更"直接"的解决方案).我感谢任何帮助:)

Answer 1

在您的点击处理程序中测试点击的项目是否具有该类：

$("#nav a").click(function(e){
     if ($(e.target).hasClass("noclick"))
         return false;

     // your other code here
});

请注意，通过测试事件的target元素，您不会阻止子元素的点击工作。

或者，如果“noclick”类没有动态更改，即那些“noclick”链接开始时并且始终为“noclick”，您可以更改选择器，以便您的单击处理程序不绑定到这些特定元素：

$("#nav a").not(".noclick").click(function() { ...