Question

我有一个＆＃34;子菜单＆＃34;只是出现：悬停。 [[ JSFiddle here. ]]

$('.prices').hover(function () {
    $('.sub-menu').fadeIn(150);
}, function () {
    $('.sub-menu').fadeOut(120);
});

问题＃1 〜当我：将鼠标悬停在主菜单上并希望点击子菜单的链接时，它就会消失。

问题＃2 〜当第一个问题解决后，我可能会有另一个问题：子菜单有很多链接，所以直观的用户行为（当他想去的时候）最后一个链接）＆＃34; draw＆＃34;一个三角形并去那里，但这将使子菜单再次消失。怎么避免这个？（如下图所示）

enter image description here

请阅读：我知道子菜单应位于 li元素中，但这不适用于我正在做的事情。 jsfiddle只是真实内容的一个例子。

Answer 1

虽然在大多数情况下我会建议您解决问题，以便您的子菜单是其父母的实际孩子，如果您真的无法解决这个问题，那么这样的事情应该有效（{ {3}}）：

var priceTimeout; function hide_prices() { clearTimeout(priceTimeout); $(".sub-menu").fadeOut(150); } $(".prices").on("mouseenter", function() { $(".sub-menu").fadeIn(150); }); $(".prices").on("mouseleave", function() { clearTimeout(priceTimeout); priceTimeout = setTimeout(hide_prices, 1000); }); $(".sub-menu").on("mouseenter", function() { clearTimeout(priceTimeout); }); $(".sub-menu").on("mouseleave", hide_prices);

有几点需要注意：

由于您的.sub-menu不是.prices的后代，因此当您从一个转移到另一个时，价格的mouseleave将始终触发。我们通过设置超时来解决这个问题和“三角”鼠标移动问题，之后我们清除子菜单。如果我们在该点之前进入子菜单，我们会清除超时，以便它永远不会被隐藏。

您可以像以前一样使用简写.hover()来缩短此代码，但我更喜欢始终使用显式.on()方法的清晰度。

Answer 2

您的问题是因为您添加了mouseout事件处理程序（hover中的第二个参数），它会在触发时隐藏子菜单。有一个简单的解决方案是在实际隐藏子菜单之前给出约100 ms的延迟，它足够短，不会产生视觉差异，但它会让子菜单上的悬停有机会停止当前的动画。子菜单（delay和随后的fadeOut）。所以代码应该添加：

// .prices:hover shows .submenu
$('.prices').hover(function () {
    $('.sub-menu').stop(true,true).fadeIn(150);
}, function () {
    $('.sub-menu').stop(true,true).delay(100).fadeOut(120);
});
//
$('.sub-menu').hover(function(){        
    $(this).stop(true);  
    $(this).fadeIn(0);
}, function(){
    $(this).fadeOut(120);
});

Demo.

注意：您的第二个问题不应该过于关注。通常，用户应首先将鼠标移到子菜单上。否则我们将不会有任何解决方案，除非只是在鼠标移出价格菜单时显示子菜单。

Answer 3

这是解决方案，试试这个。

http://jsfiddle.net/iamrmin/tQcX9/3/

<ul class="menu">
    <li class="home">
        <a href="#">Home</a>
    </li>
    <li class="contact">
        <a href="#">Contact</a>
    </li>
    <li class="location">
        <a href="#">Location</a>
    </li>
    <li class="prices">
        <a href="#">Prices &raquo;</a>
        <ul class="sub-menu">
    <li>
        <a href="#">Year 2005</a>
    </li>
    <li>
        <a href="#">Year 2006</a>
    </li>
    <li>
        <a href="#">Year 2007</a>
    </li>
    <li>
        <a href="#">Year 2008</a>
    </li>
    <li>
        <a href="#">Year 2009</a>
    </li>
    <li>
        <a href="#">Year 2010</a>
    </li>
    <li>
        <a href="#">Year 2011</a>
    </li>
    <li>
        <a href="#">Year 2012</a>
    </li>
    <li>
        <a href="#">Year 2013</a>
    </li>
    <li>
        <a href="#">Year 2014</a>
    </li>
</ul>
    </li>
    <li class="jobs">
        <a href="#">Jobs</a>
    </li>
</ul>


.sub-menu {
    display: none;
    position: absolute;
    left: 100px;
    background: #F4F4F4;
    list-style: none;
    padding: 10px;
}


a
{
width: 101px;
display: inline-block;
}

Answer 4

由于嵌套ul并不适合您，因此这是另一种解决方案。

在.prices的悬停事件中淡入菜单。但只有当鼠标留在.sub-menu时才淡出。这将解决两个问题。

$('.prices').hover(function () {
    $('.sub-menu').fadeIn(150);
});
$('.sub-menu').mouseleave(function () {
    $(this).fadeOut(150);
});

此外，如果用户没有输入.sub-menu，您可能希望在特定超时期限后隐藏子菜单。

Fiddle

刚出现在悬停时的可点击子菜单

4 个答案:

Demo.