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）。现在，在悬停在标题上时，它会显示＆＃34; navlinks＆＃34;的第一个内容。

Here's a fiddle to show you

由于

Answer 1

为什么使用.title元素的索引，如果其他LI看起来像这样，which变量将始终为0，并且＆＃39 ;不是定位右.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

mouseenter / leave＆amp;鼠标悬停/出问题

1 个答案: