1

hoverintent プラグインを使用して、次の JavaScript コードを置き換えようとしています。

$('#top').on('mouseenter', '#nav', function(e){
    $('#top ul').delay(100).slideDown(300);
    $('#top').stop().animate({
        height: 230
    }, 400);
});

$('body').on('mouseleave', '#top', function(e){
    $('#top ul').slideUp(300);
    $('#top').stop().animate({
        height: 97
    }, 400);
});

私のhtmlは次のとおりです。

<div id="main">
    <div id="top">
        <a href="#" class="logo"></a>
        <ol id="nav">
            <li><a href="#">Home</a></li>
            <li>
                <a href="#">Company</a>
                <ul>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Management</a></li>
                    <li><a href="#">Careers</a></li>
                </ul>
            </li>
            <li>
                <a href="#">Products</a>
                <ul>
                    <li><a href="#">Product 1</a></li>
                    <li><a href="#">Product 2</a></li>
                    <li><a href="#">Product 3</a></li>
                </ul>
            </li>
            <li><a href="#">Contact Us</a></li>
        </ol>
    </div>
</div>

これが私のcssです：

html { background:#fff; font-family: Arial, Helvetica, sans-serif; }

#main { position: relative; width: 860px; margin: 0 auto; text-align: left; padding: 0 40px; }

#top { width: 860px; height: 97px; border-bottom: 1px solid #f0f1f0; padding-bottom: 30px; }
#top a.logo { display: block; float: left; width: 186px; height: 55px; margin-top: 40px; background: #ccc; }
#top a.logo:hover { background: #ddd; }

#top ol { position: absolute; top: 37px; right: 40px; display: block; overflow: visible; z-index: 10; }
#top ol li { display: inline-block; float: left; text-align: right; margin-left: 24px; padding-top: 20px; }
#top ol li a { display: block; font-family: "Arial Narrow", "Helvetica Narrow", sans-serif; font-size: 0.8em; color: #989f98; text-decoration: none; text-transform: uppercase; margin-bottom: 5px; }
#top ol li a.current,
#top ol li a:hover { color: #e9292f; }

#top ul { display: none; padding-bottom: 6px; max-width: 95px; border-top: 1px dotted #d1d1d1; }
#top ul li { display: block; float: none; margin-left: 0; padding-top: 3px; }
#top ul li a { font-size: 0.7em; font-family: Arial, Helvetica, sans-serif; text-transform: none; }

これは、私が達成しようとしていることの簡単な図です。

ダイアグラム

私が望むのは、ユーザーがマウスオーバーして#nav、マウスを外したときにのみ消えるようにすることです#top（私の図では灰色です）。hoverintent サイトの例を考えると、これを達成する方法がわかりません:(

誰でもポインタを持っていますか？前もって感謝します！

- - - 編集 - - -

次のようにして、ホバーインテントがある程度まで機能するようになりました。

var config = {    
    over: function(){
        $('#top ul').delay(100).slideDown(300);
        $('#top').stop().animate({
            height: 230
        }, 400);
    },
    timeout: 0,    
    out: function(){
        $('#top ul').slideUp(300);
        $('#top').stop().animate({
            height: 97
        }, 400);
    }
};

$('#nav').hoverIntent(config);

問題は、 divの代わりにマウスアウトulすると消えてしまうことです。閉じますが葉巻はありません:(#nav#top

4

2 に答える 2

0

これはあなたの状況に合わないかもしれませんが、JavaScript 以外のメソッドが必要な場合:

http://www.ryancollins.me/?p=1041

これはうまくいきます。また、ここでのプリンシパルは、JavaScript メソッドにも関連しています。

基本的に、いくつかの変数が必要です。

navHover = false; subNavHover = false;

明らかな要素をマウスで出し入れするときは、それらの変数を true/false に設定するだけです。

次に、両方のマウスを離して、簡単なチェックを行います。

if( navHover )

また

if( subNavHover )

いずれかの変数が true に設定されている場合、ナビゲーションを非表示にしないでください。アニメーションが必要な場合は、コールバックとおそらく短いタイムアウト遅延を使用して、すぐに非表示にならないようにする必要があります。

しかし、もし私があなたなら、CSS のみのバージョンを使用します。

それが役立つことを願っています:)

于 2012-04-23T10:19:56.993 に答える
0

ご覧のとおり: http://jsfiddle.net/Cj8sj/ jQuery コードが動作します。

私はあなたが持っているCSSの問題だと思います... #nav をfloatで配置したと思います。#top が非フローティング コンテンツの高さしか持たない理由。以下を使用してこれを修正できます: #top { overflow: hidden; }UL と #nav 要素で同じこと。

これで問題が解決しない場合は、CSS を提供してください

更新: CSS を投稿したので... 絶対位置の要素についても同じ効果があり、親の高さを調整しません。

于 2012-04-23T10:27:27.557 に答える