Question

我在菜单中有一些不同的类名，如下所示：

<li class="cat0">...</li>
<li class="cat1">...</li>
<li class="cat2">...</li>

在悬停这些类时，会添加一个新类：

<li class="cat0 open">...</li>
<li class="cat1">...</li>
<li class="cat2">...</li>

在一个单独的.js文件中，我有一个从json文件加载一些内容的函数。默认情况下/打开页面，该函数将触发3个列表类。当你将鼠标悬停在列表上并且li中有类打开时，我希望它能够触发。

阅读论坛后，我无法让它发挥作用。

Jquery的

function menuHasClassHover(){   

  //here I need something to check if li has class open I suppose??!

  var url = 'site.com/page.ajax';

  $.getJSON(url, function (data){     
  ....... etc
  });
}

任何帮助非常感谢！

Answer 1

您可以通过.hasClass(className)检查元素是否具有特定的类。

示例：

if ($('li.cat0').hasClass('open')) // do something

Answer 2

我假设动态添加open类，您可以在其中执行：

$('ul').on('hover', 'li.open', ... );

这会委托事件，以便只有li类的open元素触发输入/输出功能。即使您使用jquery添加li或open类，这也可以正常工作。

Answer 3

首先要处理悬停事件。你可以用jquery来解决这个问题。将标识类放在包含<ul>元素上是个好主意。

<ul class="hoverList">

然后挂钩事件处理程序

$(".hoverList li").mouseover(function(e){
    // Do stuff in here
    //If you want the element that was hovered over look at $(e.target)
 };

要小心，因为这个事件会被激活很多，如果你每次都在制作ajax请求，那么它可能不是最有效的做事方式。

如果班级在悬停时则触发一个功能

3 个答案: