7

メインナビゲーションとサブナビゲーションがありますが、設計上の理由から、別々のDIVにあります。メインナビゲーションアイテムにカーソルを合わせたときに適切なサブナビゲーションを表示したいのですが、ユーザーがマウスをメインナビゲーションアイテムの外に移動してサブナビゲーションに移動した場合も、サブナビゲーションを開いたままにしておきたいと思います。 -ナビゲーションエリア。最後の部分は私が立ち往生している場所です。

setTimeout（）とIFステートメントを使用して何かを行う必要があることをホバーアウトすることを考えていますが、その領域で進展を遂げることができませんでした。それも試してみる価値のあるアプローチですか？

HTML：

<div id="mnav">
 <ul id="buttons">
  <li class="one"><a href="#">Main 1</a></li>
  <li class="two"><a href="#">Main 2</a></li>
  <li class="three"><a href="#">Main 3</a></li>
  <li class="four nav-dark"><a href="#">Main 4</a></li>
 </ul>
</div> <!-- /mnav -->

<div id="snav">
 <ul class="snav-one">
    <li><a href="#">Sub 1.1</a></li>
    <li><a href="#">Sub 1.2</a></li>
    <li><a href="#">Sub 1.3</a></li>
    <li><a href="#">Sub 1.4</a></li>
    <li><a href="#">Sub 1.5</a></li>
    <li><a href="#">Sub 1.6</a></li>
 </ul>
 <ul class="snav-two">
    <li><a href="#">Sub 2.1</a></li>
    <li><a href="#">Sub 2.2</a></li>
 </ul>
</div> <!-- /snav -->

JS：

$(document).ready(function() {
 $("#buttons li.one, #buttons li.two").hover(function(){
  var subnav = 'ul.snav-' + $(this).attr('class');

  $("#snav").slideDown('fast').addClass("open").find(subnav).show();

 }, function(e){
  var subnav = 'ul.snav-' + $(this).attr('class');

  $("#snav").slideUp('fast').removeClass("open").find(subnav).hide();
 });
});
4

3 に答える 3

8

マウスメニューの人間工学では、メインメニューからサブメニューにマウスを移動するときに少し遅延が必要なため、マウスがそこに到達する前にサブメニューが閉じません。（質問が言うように。）

ただし、メニューが開くまでに遅延が必要です。これは、煩わしい「フライオーバー」アクティベーションを回避し、メインメニューから移動するときに誤ってsub1からsub2に切り替わる一般的な発生を減らすためです。

したがって、質問コードには次のものが必要です。

  1. hoverサブメニューul要素の上。
  2. stopマウスの選択が変更された場合にアニメーションの実行を停止します。
  3. オープンとクローズの両方を制御するリセット可能なタイマー。

jsFiddleのデモを参照してください。

すべてを一緒に入れて：

$("#buttons li.one, #buttons li.two").hover ( function () { MenuOpenCloseErgoTimer (
        100,
        function (node) {
            var subnav = 'ul.snav-' + $(node).attr ('class');
            $("#snav ul").hide ();
            $("#snav").stop (true, true).slideDown ('fast').addClass ("open").find (subnav).show ();
        },
        this
    ); },
    function () { MenuOpenCloseErgoTimer (
        200,
        function () {
            $("#snav").stop (true, true).slideUp ('fast').removeClass ("open").find ('ul').hide ();
        }
    ); }
);

$("div#snav ul").hover ( function () { MenuOpenCloseErgoTimer (
        0,
        function () {
            $("#snav").stop (true, true).slideDown ('fast').addClass ("open");
            $(this).show ();
        }
    ); },
    function () { MenuOpenCloseErgoTimer (
        200,
        function () {
            $("#snav").stop (true, true).slideUp ('fast').removeClass ("open");
            $("#snav ul").hide ();
        }
    ); }
);

function MenuOpenCloseErgoTimer (dDelay, fActionFunction, node) {
    if (typeof this.delayTimer == "number") {
        clearTimeout (this.delayTimer);
        this.delayTimer = '';
    }
    if (node)
        this.delayTimer     = setTimeout (function() { fActionFunction (node); }, dDelay);
    else
        this.delayTimer     = setTimeout (function() { fActionFunction (); }, dDelay);
}



#snav ulサブメニュー間のスワップが中断された後にクリーンアップする ために、で必要な追加の操作に注意してください。

于 2011-05-26T02:19:22.573 に答える
4

.hover（）メソッドを使用する代わりに、mouseenterとmouseleaveに別々のイベントハンドラーを使用してみてください。mouseenterはmnavボタンにのみ接続され、mouseleaveはmnavボタンとsnavdivの両方に接続されます。マウスリーブ関数では、おそらく小さなタイムアウトを追加し、それらが1つの要素から別の要素に移動したかどうかを確認する必要があります。

次のようなものを試してください。

<script>
    var timer;
    $(document).ready(function() {
        $("#mnav").mouseenter(function() {
            $("#snav").slideDown();
        });

        $("#mnav, #snav").mouseleave(function() {
            timer=setTimeout("$('#snav').slideUp();",50);
        });

        $("#mnav, #snav").mouseenter(function() {
            clearTimeout(timer);
        });
    });
</script>
于 2011-05-26T00:34:40.220 に答える
1

例を参照→

以下はあなたのために働くはずです、私はいくつかの変更を加えました：

  • サブナビゲーションに入るときにアニメーションを停止する.stop()メソッドを使用しました
  • 上記が機能するように、スライドをコンテナではなくサブナビゲーションに移動しました
  • 他のいくつかのもの

下記参照：

$("#buttons li.one, #buttons li.two").hover(function() {
    var subnav = 'ul.snav-' + $(this).attr('class');

    $("#snav").find('ul').slideUp('fast');
    $("#snav").addClass("open").find(subnav).stop(true, true).slideDown('fast');
}, function(e) {
    var subnav = 'ul.snav-' + $(this).attr('class');

    $("#snav").removeClass("open").find(subnav).slideUp('fast');
});

$('#snav').bind('mouseenter', function(e) {
    $(this).find('ul').stop(true, false);
}).bind('mouseleave', function(e) {
    $(this).find('ul').stop(true, true).slideUp('fast');
});

例を参照→

于 2011-05-26T00:44:33.440 に答える