Javascript jQuery查找div帮助

我目前正在构建一个菜单栏，它由一些图标组成，当鼠标悬停在上面时，这些图标会显示一个上下文相关的子菜单。基本上，当鼠标悬停在图标上时，弹出菜单/工具提示会显示更多选项，但图标本身也应该可以单击

到目前为止，我对每个菜单项使用以下HTML构造和jQuery：

<div id="profile" class="menu-item">
    <div id="profile-tip" class="tip">
        **insert profile menu options**
    </div>
</div>

<div id="search" class="menu-item">
    <div id="search-tip" class="tip">
        **insert search menu options**
    </div>
</div>

我希望做的是将HTML更改为如下所示，以便可以将onClick链接应用于profiles div：

<div id="profile" class="menu-item" onclick="window.location = 'profile.php'"></div>
    <div id="profile-tip" class="tip">
        **insert menu options**
    </div>

总而言之：我需要修改jQuery以基于父div的ID+字符串-tip显示div

---

希望这不会太令人困惑。非常感谢您的帮助：

我不确定我是否完全理解您的需求，但可以尝试以下内容：

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

编辑：如果提示元素不是菜单项div的子元素，则可以执行以下操作：

$(".menu-item").hover(
    function() {
        $('#' + this.id + '-tip').fadeIn("fast").show(); //add 'show()'' for IE
    },
    function() { //hide tooltip when the mouse moves off of the element
        $('#' + this.id + '-tip').hide();
    }
);

---

我不是100%清楚这里的目标，但您可以通过ID获得您的div，如下所示：

$(".menu-item").hover(function()
{
    $(this).find(".tip").fadeIn("fast").show();
});

或在CSS中：

.menu-item .tip
{
    display: none;
}

.menu-item .tip:hover,
.menu-item:hover .tip
{
    display: auto;
}

---

不要在悬停对象的父对象中查找div的名称，而是使用jQuery查找悬停对象的子对象的工具提示…向下搜索DOM，而不是向上搜索

---

谢谢你的回复。为我几乎语无伦次的第一篇文章道歉。jQuery需要是泛型的。因此，当div配置文件悬停在上方时，它会找到div配置文件提示并使其可见。当div搜索悬停在上方时，它会找到div搜索提示并使其可见。因此，与其按ID引用div，不如引用它的class.CSS更容易和更干净-检查我的更新答案。当$this和.find一起使用时，它是否只搜索嵌套在该div中的元素？菜单项div=profile和关联的工具提示div=profile提示未嵌套在html中。是的，在本例中，查找从指定的元素开始，即.menu项div。是否可以更新html以反映它们未嵌套？我将更新我的答案插入菜单选项我再次阅读了你的问题。错过了关于如何更改html的部分。。很抱歉但是我发布的新代码应该可以工作：-当div不再嵌套时，工具提示不再弹出

$(".menu-item").hover(function()
{
    $(this).find(".tip").fadeIn("fast").show();
});

.menu-item .tip
{
    display: none;
}

.menu-item .tip:hover,
.menu-item:hover .tip
{
    display: auto;
}

$('.menu-item').hover(function(){
     $(this).find('.tip).fadeIn();


},
function() {
    $(this).find('.tip).fadeOut();
});