jquery - jQuery在一个div上向上打开一个隐藏的div

Question

我有这样的结构。

<div id="ContentPlaceHolder2_div_Menu" class="bottom-link">
    <ul class='forlasttooltip'>
        <li>
            <div class='orange-button divm'>
                3G/GPRS</div>
            <div class='tooltip'>
                <div class='tooltipinner'>
                    <ul>
                        <li class='li' rel='#yesno'><a href='my.aspx' rel='#overlay'>How to configure GPRS?</a>
                        </li>
                        <li class='li' rel='#yesno'><a href='test.aspx' rel='#overlay'>How to Browse Internet?</a>
                        </li>
                        <li class='li' rel='#yesno'><a href='test1.aspx' rel='#overlay'>How to select 3G Network?</a></li></ul>
                </div>
            </div>
        </li>
        <li>
            <div class='orange-button divm'>
                Email</div>
            <div class='tooltip'>
                <div class='tooltipinner'>
                    <ul>
                        <li class='li' rel='#yesno'><a href='' rel='#overlay'>How To Configure Email?</a>
                        </li>
                        <li class='li' rel='#yesno'><a href='' rel='#overlay'>Exchange Mail Configuration</a></li></ul>
                </div>
            </div>
        </li>
        <li>
            <div class='orange-button divm'>
                MMS</div>
            <div class='tooltip'>
                <div class='tooltipinner'>
                    <ul>
                        <li class='li' rel='#yesno'><a href='' rel='#overlay'>How to Send MMS?</a></li></ul>
                </div>
            </div>
        </li>
        <li>
            <div class='orange-button-d divm'>
                Speed<br />
                Issue</div>
            <div class='tooltip'>
                <div class='tooltipinner'>
                    <ul>
                        <li class='li' rel='#yesno'><a href='tet.aspx'
                            rel='#overlay'>How to clear cache and cookies?</a></li></ul>
                </div>
            </div>
        </li>
    </ul>
</div>

当用户将鼠标悬停在with 类上时，我想打开divwith类。 这就像在 div 上方打开菜单。 早些时候我使用的是现在不可用的。 如下tooltipdivdivm

tooltipflowplayer

谢谢。

编辑

我创建了一个小提琴http://jsfiddle.net/c2pdG/28/

Answer 1

http://jsfiddle.net/c2pdG/23/

这更像是一个 CSS 问题。我更新了 CSS 以便它可以按照您的喜好工作，但您可能需要进行更多调整——您的原始代码也不能完美运行。

本质上，包含子菜单的菜单项应该有position: relative和overflow: visible。然后，子菜单（工具提示）需要position: absolute和bottom: 100%，这将把它的底部固定在其相对父级（即.bottom-link）的顶部。

即使动画正在使用.slideDown，它仍然会出现向上动画。

Answer 2

你可以这样使用

$(".divm").mouseover(function(){

 var position = $(this).offset(); // calculate the position of click

 var winH = $(window).height();   

 var left = position.left;        // calculation bottom left position of tooltip to be displayed
 var bottom  = winH-position.top
$(".tooltip").attr("style","left:"+left+"px;bottom:"+bottom +"px;").show();

});

Answer 3

如果您可以控制源代码，我只需切换 div 的位置

<li>
        <div class='tooltip'>
            <div class='tooltipinner'>
                <ul>
                    <li class='li' rel='#yesno'><a href='my.aspx' rel='#overlay'>How to configure GPRS?</a>
                    </li>
                    <li class='li' rel='#yesno'><a href='test.aspx' rel='#overlay'>How to Browse Internet?</a>
                    </li>
                    <li class='li' rel='#yesno'><a href='test1.aspx' rel='#overlay'>How to select 3G Network?</a></li></ul>
            </div>
        </div>
        <div class='orange-button divm'>
            3G/GPRS</div>
    </li>

这将打开 divm div 上方的工具提示 div。

如果没有，请尝试使用 prependTo() jQuery 方法

$('.tooltip').prependTo($('.tooltip').parent());

这会将元素“移动”到其父元素中的顶部元素，即 li 标签。

所以你的函数可能看起来像这样：

$(".divm").mouseover(function(){
    $('.tooltip').prependTo($('.tooltip').parent()).show();
}