jQuery 和 CSS 弹出菜单链接问题答案

【问题标题】：jQuery and CSS Pop-up Menu Link IssuejQuery 和 CSS 弹出菜单链接问题
【发布时间】：2011-03-18 06:05:34
【问题描述】：

我正在使用 CSS 和 jQuery 开发底部栏菜单。它本质上是一个持久菜单，让用户可以快速访问网站的不同功能。

该栏由小图标（“菜单项”类）组成，将鼠标悬停在上面时会显示一个带有多个选项的小上下文菜单。此 div 内的选项是可点击的，但图像图标本身也应该是可链接的。

html 的结构如下，其中#profile 的 CSS 指定按钮的特定图像。

<div id="profile" class="menu-item">
    <div id="profile-tip" class="tip tip-submenu">
    <div class="tip-profile">--Profile Content--</div>
    </div> 
</div>

当图像悬停时，“profiles-tip” div 变为可见，这是使用以下 javascript 实现的

$(".menu-item").hover(function() {
    $(this).find("div").fadeIn("fast").show(); //add 'show()'' for IE
$(this).mouseleave(function () { //hide tooltip when the mouse moves off of the element
    $(this).find("div").hide();
});
});

简而言之，我希望配置文件图标可以点击，并说，链接到页面“profiles.php”。我认为这可以通过应用以下内容轻松实现：

<div id="profile" class="menu-item" onClick="window.location.href='profiles.php'">
    <div id="profile-tip" class="tip tip-submenu">
    <div class="tip-profile">--Profile Content--</div>
    </div> 
</div>

应用此解决方案时，它会导致在弹出菜单中（即不是图标本身）中进行的任何点击也链接到同一位置。

非常感谢您能破译上述内容并提供一些帮助。愿意在必要时提供更多信息。

【问题讨论】：

标签： jquery css menu popup

【解决方案1】：

我在这里为你准备了一些东西：http://jsfiddle.net/qstv9/

试试看:-)

【讨论】：

嗨萌，看起来你的代码运行良好，我只在他的介绍中读到他也喜欢 div（工具提示）内的选项是可点击的，还是我错了？
嗨萌，感谢您的回复。 Wouter 是正确的，“div”（工具提示）内的选项应该是可点击的。从本质上讲，它变成了一个弹出菜单。因此，当我将鼠标悬停在第一个灰色方块上时（单击它会将我链接到个人资料），会出现一个带有多个其他链接（可单独单击）的 div。任何进一步的帮助将不胜感激:)
现在稍微修改了问题，因为我对我所追求的有了更好的理解：stackoverflow.com/questions/5373386/jquery-find-div-help