加载页面时触发的mouseenter&如果未触发其他mouseenter事件 [英] mouseenter triggered on page load & if no other mouseenter event is triggered

问题描述

我想在页面加载时在菜单项'#currentitem a'上触发一个mouseenter.我已经完成了:

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'.
2. 当另一个项目触发了鼠标进入时，'#currentitem a'.
3. 当该菜单项触发mouseleave时，请按鼠标键'#currentitem a'，以便始终在没有其他条件时触发该项目.

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.

菜单是更复杂的jQuery设置的一部分，而不仅仅是普通的CSS，所以这是我看到的最好方法.任何帮助将不胜感激.

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.

我现在已经创建了一个JSFiddle来显示我要执行的操作:

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

http://jsfiddle.net/qFS84/

推荐答案

以下是应该尝试的方法

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

如果这行不通，请告诉我，我会每周处理一次.

If this does not work please let me know and I will tweek it.

查看了您的修改后，我可能发现了您的问题

After looking over your edits, i might have found your problem

当您使用jQuery定位元素时，id属性只能在DOM中使用一次.假设这对于您的html是正确的，那么我猜想的下一件事是，当鼠标输入其他项(例如，列表中的下一个li)时，您没有在听.如果是这样，则只需要侦听其他li元素上的mouseenter事件即可.

When you are targeting elements with jQuery, the id attribute should only be used once in your DOM. Assuming that this is true with your html, the next thing I would guess is that you are not listening for when the mouse enters a different item (for example the next li in your list). If this is true, you just need to listen for the mouseenter event on the other li elements.

最后，如果您正在监听事件，但是它们没有起作用，则可能有另一事件可能对您有用.该事件是mouseover

Lastly if you are listening for the events but they are not working, there is another event they might work for you. The event is mouseover

中间编辑更新:

如果您要谈论的是当您将鼠标悬停在我们的项目"上而没有击中其他任何东西时，菜单没有隐藏，那是因为鼠标从未进入"该元素，因此它不会隐藏自己，因此解决方法很简单:

If you are talking about the menu not hiding when you mouse straight over "Our Projects" without hitting anything else, that is because the mouse never "entered" the element so it will not hide itself, the way around this is simple:

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

该事件的选择器仅针对不是#currentitem的链接元素，并且只会为每个链接触发一次.这可能就是我想要的东西！我在您的jsfiddle上对其进行了测试，并且确实有效.

That selector for my event targets only link elements that are not #currentitem and will only trigger once for each link. This might me just what you are looking for! I tested it on your jsfiddle and it indeed worked.

这篇关于加载页面时触发的mouseenter&如果未触发其他mouseenter事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！