jQuery查找div帮助 [英] jQuery find div help

问题描述

我目前正在构建一个菜单栏，其中包含一些图标，这些图标在悬停时显示上下文子菜单.本质上，当将鼠标悬停在图标上时，会出现一个弹出菜单/工具提示(带有更多选项)，但是图标本身也应该是可单击的.

I am currently building a menu bar that consists of icons that show a contextual submenu when hovered over. Essentially, when hovering over an icon a popup menu/tooltip appears (with more options), but the icon itself should be clickable as well.

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

So far, I use the following HTML construct and jQuery for each menu item:

<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>

和

$(".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();
});
});

我想做的就是将HTML更改为如下所示(这样我可以将onClick链接应用于个人资料" div):

What I wish to do is to change the HTML to look as follows (so I can apply an onClick link to the "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.关联的工具提示/弹出菜单div始终为xxxx-tip(其中xxx是父div的名称).

However, I don't know how to modify the jQuery to find the matching div to display when hovered over. The associated tooltip/popup menu div will always be xxxx-tip (where xxx is the name of the parent div).

作为一个例子，我想象它将看起来像这样(请记住，我对jQuery知之甚少，所以我很清楚这看起来很愚蠢):

As an example, I imagine it will look something like this (keep in mind I know very little about jQuery so I'm well aware this will look stupid):

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

总结:我需要修改jQuery以基于父div的ID +字符串"-tip"显示div

To summarise: I need the jQuery modified to show the div based on the parent div's ID + the string "-tip"

希望这并不太令人困惑.任何帮助都非常感谢:)

Hopefully that isn't too confusing. Any help GREATLY appreciated :)

推荐答案

不确定我完全了解您想要什么，但也许可以尝试一些类似的事情:

Not sure I understand completely what you want, but maybe try something a little more like this:

$(".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();
    }
);

编辑:如果tip元素不是菜单项div的子级，则可以使用:

Edit: If the tip element is not a child of the menu item div, this could work:

$(".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();
    }
);

这篇关于jQuery查找div帮助的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！