Question

我有类似Gmail的Signout机制，这样当您将鼠标悬停在用户名（右上角）时，它会向下滑动一个包含“退出”链接的菜单。用户名位于浮动列表中，而滑出的菜单位于内部列表中（未浮动）。滑出/使用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。

检查这个小提琴：http://jsfiddle.net/PaKnc/

基本上滑下来的UL是你悬停在上面的LI的孩子。您可以在CSS中操纵子项的CSS属性。

例如：

#parent #child {
   style1;
}

#parent:hover #child {
   style2;
}

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

Answer 2

问题在于，当您需要退出用户名锚点以将鼠标悬停在下拉列表上时。简单的解决方案是将悬停选择器更改为li而不是a。然后，即使您仍然悬停在下拉列表上，也不会退出。

类似于Gmail的退出

2 个答案: