Question

我正在使用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>

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

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

Answer 1

我在这里为你做了一些事情：http://jsfiddle.net/qstv9/

试一试： - ）

jQuery和CSS弹出菜单链接问题

1 个答案: