0

これ以上適切なタイトルが思い浮かびませんでした。変更していただければ幸いです。

ナビゲーション用に左の列を固定しています。ユーザーがこの列のナビゲーション項目の 1 つにカーソルを合わせたときに、列の右側にサブメニューを表示したいと考えています。私の問題は、ユーザーがカーソルを新しいサブメニュー要素に移動すると、カーソルが消えることです。

これは私が今のところ行っているところですが、これを解決する最善の方法がわかりません。

私のプロジェクトのフィドル

ナビゲーション項目の 1 つに 1750 ミリ秒以上カーソルを合わせると、サブメニューが表示されますが、その上にカーソルを合わせると消えます! どうすればそこにとどまることができますか？サブメニューをホバリングするときに機能をキャンセルする必要があるかのmouseleaveようです...しかし、確かではありません...

私のCSSコード:

.page-wrapper {
    width:100%;
    height:100%;
}
.nav {
    position:fixed;
    height:100%;
    left:0;
    top:0;
    width:175px;
    background:#111;
    padding:20px 0;
}
.nav-item {
    height:40px;
    line-height:40px;
    padding:0 20px;
    color:#FFF;
    font-size:13px;
    cursor:pointer;
}
.nav-item:hover {
    background:#222;
}
.submenu {
    display:none;
    position:fixed;
    left:175px;
    top:0;
    width:175px;
    height:100%;
    background:#999;
}

私のjQueryコード:

var sub_menu_timer;
$('.nav-item').on({
    mouseenter:function() {
        sub_menu_timer = setTimeout(function() {
            $('.submenu').show();
        },1750)
    },
    mouseleave:function() {
        clearTimeout(sub_menu_timer);
        $('.submenu').hide();
    }
})

私のHTMLコード:

<div class="page-wrapper">
    <div class="submenu"></div>
    <div class="nav">
        <div class="nav-item">
            ITEM 1
        </div>
        <div class="nav-item">
            ITEM 2
        </div>
        <div class="nav-item">
            ITEM 3
        </div>
    </div>
</div>
4

4 に答える 4

2

必要なのはこれと同じくらい簡単です

$('.nav-item, .submenu').on({
    mouseenter: function () {
        $('.submenu').show();
    },
    mouseleave: function () {
        $('.submenu').hide();
    }
});

デモを見る

アップデート：

タイムアウトを維持したい場合は、次のように関数を個別に定義する必要があります-

var sub_menu_timer;
$('.nav-item').on({
    mouseenter: function () {
        sub_menu_timer = setTimeout(function () {
            $('.submenu').show();
        }, 1750)
    },
    mouseleave: function () {
        clearTimeout(sub_menu_timer);
        $('.submenu').hide();
    }
});


$('.submenu').on({
    mouseenter: function () {
        $('.submenu').show();
    },
    mouseleave: function () {
        $('.submenu').hide();
    }
});

ここに示されているように ですが、 から に移動するとsubmenu、nav-itemサブ メニューが消えてタイムアウト後に表示されます。

于 2013-09-04T14:39:27.257 に答える
0

これを行う最善の方法は、JS を必要としないリストを使用することです。

HTML:

<ul class="nav">
    <li>ITEM 1
        <ul>
            <li>ITEM 1.1</li>
            <li>ITEM 1.2</li>
            <li>ITEM 1.3</li>
        </ul>
    </li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
</ul>

CSS:

html, body {
    margin: 0;
    padding: 0;
}

.nav {
    position:fixed;
    height:100%;
    left:0;
    top:0;
    width:175px;
    background:#111;
    padding:20px 0;
    margin: 0;
}
.nav ul {
    margin: 0;
    padding: 0;
}
.nav li {
    height:40px;
    line-height:40px;
    padding:0 20px;
    color:#FFF;
    font-size:13px;
    cursor:pointer;
    list-style: none;
    margin: 0;
}
.nav li:hover {
    background:#222;
}
.nav li ul {
    display: none;
}
.nav li:hover ul {
    display: block;
    position:fixed;
    left:175px;
    top:0;
    width:175px;
    height:100%;
    background:#999;
}

デモ。

于 2013-09-04T14:37:03.080 に答える
0

は.submenuITEM div の子ではないため、サブメニューにカーソルを合わせると、ITEM div の外に出て.mouseleave. 最も簡単な解決策は、対応するサブメニューを div の子にする.nav-itemことです.submenu。.submenuこれが不可能な場合は、mouseleave とホバリングに関して、はるかに複雑な JavaScript 処理を行う必要があります。

于 2013-09-04T14:29:33.230 に答える