0

I would like to trigger a mouseenter on my menu item '#currentitem a' when my page loads. That I have done with:

$(document).ready(function(){
  $("#currentitem a").trigger('mouseenter');
});

My problem is that if I mouseenter (manually) another item, the triggered (with code above) item doesn't mouseleave. Menu items overlap.

I am a newbie, I would like to achieve the following if it is possible?

  1. mouseenter '#currentitem a' on pageload.
  2. mouseleave '#currentitem a' when another item has a mouseenter triggered.
  3. When that menu item triggers mouseleave, mouseenter '#currentitem a' so the item is always triggered when nothing else is.

The menu is part of a more complex jQuery setup, and not just plain CSS so this is the best way I can see to do it. Any help would be much appreciated.

I have now created a JSFiddle to show what I am trying to do:

http://jsfiddle.net/qFS84/

4

1 回答 1

0

这里有一些可以尝试的东西

$(function(){
    $('#currentitem a').trigger('mouseenter');
    $('.currentitem a').on('mouseenter', function(e) {
        if ($('.currentitem a:focus').length > 0) {
            $('.currentitem a:focus').blur();
        }
    });
});

如果这不起作用,请告诉我,我会处理它。

编辑:

查看您的编辑后,我可能发现了您的问题

当你使用 jQuery 定位元素时,id 属性应该只在你的 DOM 中使用一次。假设这对您的 html 来说是正确的,我猜接下来的一件事是当鼠标进入不同的项目(例如列表中的下一个 li)时,您没有在听。如果这是真的,您只需要监听mouseenter其他 li 元素上的事件。

最后,如果您正在侦听事件但它们不起作用,那么它们可能会为您工作的另一个事件。该事件是mouseover

中期编辑更新:

如果您说的是当您将鼠标直接悬停在“我们的项目”上而不点击其他任何东西时菜单没有隐藏,那是因为鼠标从未“进入”元素,因此它不会隐藏自己,解决这个问题的方法很简单:

$("#mydroplinemenu > ul > li[id!='currentitem'] > a").one('mouseenter', function(e) {
   $('#currentitem a').trigger('mouseleave'); 
});

我的事件的选择器仅针对不是#currentitem 的链接元素,并且每个链接只会触发一次。这可能正是您要找的东西!我在你的 jsfiddle 上对其进行了测试,它确实有效。

于 2013-07-16T16:54:59.390 回答