javascript - 类似 Gmail 的退出

Question

我有一个类似 Gmail 的注销机制，这样当您将鼠标悬停在用户名(位于右上角)上时，它会向下滑动一个包含“注销”链接的菜单。用户名位于 float 列表上，而滑出的菜单位于内部列表(非 float )上。滑出/滑入是使用 jQuery 执行的。

这就是它应该做的:

• 当用户名悬停在上面时，内部菜单会向下滑动(变得可见)；
• 如果鼠标移至内部菜单，内部菜单应保持可见；
• 如果鼠标悬停在其他地方，内部菜单应该向上滑动(变得不可见)。

这就是它目前所做的:

• 鼠标悬停在用户名上时，内部菜单向下滑动；
• 当光标离开用户名时，菜单会向上滑动 - 无论光标位于何处。

感知的解决方案:我相信应该有一个 if 子句来检查光标是否位于内部列表上并保持内部列表打开，这就是让我难住的部分。

编辑:这是当前代码:

HTML:

<ul id="user_spot">
    <li><a href="#"><span class="username">username</a>
        <ul id="user_spot_links">
            <li><a href="/home/sign?out=y">Sign Out</a></li> <br />
        </ul>
    </li>
</ul>

CSS:

ul#user_spot li {
    float:left;
    position:relative;
}
ul#user_spot_links {
    position:absolute;
    top:20px;
    display:none;
}
ul#user_spot_links li {
    float:none;
    clear:both;
}

JS:

$('ul#user_spot li a').hover(function() {
$('ul#user_spot_links').slideDown('slow');
    return false;
}, function() {
    // this is where I believe the needed code should be"
    $('ul#user_spot_links').slideUp('slow'); 
});

Answer 1

你不需要 JS。

检查这个 fiddle :http://jsfiddle.net/PaKnc/

基本上，向下滑动的 UL 是您将鼠标悬停在其上的 LI 的子级。您可以在 CSS 中操作子级的 CSS 属性。

例如:

#parent #child {
   style1;
}

#parent:hover #child {
   style2;
}

这里，style1 和 style2 可以完全不同。在我们的例子中，我们通过更改 display 属性来利用这一点。