javascript - mouseenter/leave & mouseover/out 问题

Question

脚本:

$( ".title").mouseenter(function() {
    var which = $(this).index();
    $('.globalnav li').find('.dropdown').hide().eq(which).show();
}).mouseleave(function() {
    var which = $(this).index();
    $('.globalnav li').find('.dropdown').hide().eq(which).hide();
});

导航:

<ul class="globalnav">
    <li>
        <div class="title"><a href="#" target="_self">Home</a></div>
        <div class="dropdown">
            <div class="navlinks">
                <div class="linkstitle">Title</div>
                <div class="navlink"><a href="#" target="_self">Link1</a></div>
                <div class="navlink"><a href="#" target="_self">Link1</a></div>
            </div>
        </div>
    </li>
...

上面的代码是我现在正在使用的代码，它在 Chrome 中无法按预期运行 *我需要按住我的点击才能查看 div。我使用鼠标悬停，它在 IE 和 FF 中无法正常工作。

由于编码格式本身的性质(客户给定的代码)，我也无法显示标题的相关 div(在标题悬停时，显示特定的 div)。现在，将鼠标悬停在标题上时，它会显示第一个 li 的“navlinks”内容。

Here's a fiddle to show you

谢谢

Answer 1

为什么要使用 .title 元素的索引，如果其他 LI 看起来像那样，which 变量将始终为 0，这不是定位正确的 .dropdown 的方法吗？

试试这样的东西

$( ".title").on('mouseenter mouseleave', function(e) {
    var dropdown = $(this).closest('li').find('.dropdown').toggle(e.type=='mouseenter');

    $('.dropdown').not(dropdown).hide();
});

如果您希望下拉列表在悬停时可见，请将其放在触发鼠标离开的元素内

<li>
    <div class="title">
        <a href="#" target="_self">Home</a>
        <div class="dropdown">
            <div class="navlinks">
                <div class="linkstitle">Title</div>
                <div class="navlink"><a href="#" target="_self">Link1</a></div>
                <div class="navlink"><a href="#" target="_self">Link1</a></div>
            </div>
        </div>
    </div>
</li>

FIDDLE