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.

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>

and

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

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>

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

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

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

回答1:

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

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

回答2:

Instead of finding the name of the div in the PARENT of the thing you're hovered over, use jQuery to find the tooltip that is a CHILD of the thing you're hovered over...search down the DOM, instead of UP.

Use jQuery's $(this) operator...

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


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

回答3:

I'm not 100% clear on the goal here but you can get your div by ID as shown here:

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

Or in CSS:

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

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

来源：https://stackoverflow.com/questions/5373386/jquery-find-div-help

标签

javascript

jquery

tooltip

contextmenu