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

ありがとう。

編集

私はfidleを作成しました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();
}