0

まとめ/問題：

jQueryとhoverIntentを使用してサブメニューを表示するメニューシステムのリンクにカーソルを合わせた後、マウスポインターがサブメニューに移動すると、サブメニューはすぐに閉じます。

JSfiddleの例

詳細

jQueryhoverIntentプラグインで問題が発生しています。サブメニューを含むナビゲーションメニューがあります。そのサブメニューは、ユーザーが指定されたトップレベルのリンクにカーソルを合わせると開きます。HTMLは次のとおりです。

<ul id="Menu">
    <li><a href="/">Home</a></li>
    <li><a href="news/">News</a></li>
        <li class="hassublinks"><a href="software.php">Software & Apps</a>
            <ul>
                <li><a href="windows.php">Windows</a></li>
                <li><a href="mac.php">Mac</a></li>
                <li><a href="ios.php">iOS</a></li>
                <li><a href="android.php">Android</a></li>
            </ul>
        </li>
    <li><a href="feedback.php">Feedback</a></li>
    <li><a href="about.php">About</a></li>
</ul>

基本的に、 IDが「Menu」<li>の各内<ul>にはWebサイトのページへのリンクがあり、の1つにはさらにリンク<li>'sのあるサブメニュー（別の<ul>）が含まれています。<li>サブメニューが含まれているものには、クラス「hassublinks」が与えられており、ソフトウェアとアプリのメインページにリンクするためのタグがまだ含まれ<a>ています。ただし、サブメニューが含まれているため、jQueryとhoverIntentを使用して作成し、ソフトウェアとアプリにカーソルを合わせると<li>サブメニュー<ul>が表示されるようにしました。コードは次のとおりです。

$(function($) {

    function showMenu(){ 
        $('#Menu ul').slideDown(500, "swing");
    }
    function hideMenu(){ 
        $('#Menu ul').slideUp(500, "swing");
    } 

    $('#Menu > li.hassublinks > a').hoverIntent({
        over: showMenu,
        timeout: 400,
        out: hideMenu
    });
});

このコードは、サブリンク<a>のあるトップレベルのタグに<li>カーソルを合わせるとサブメニューが表示され、マウスポインターを離すと消えるようにするだけです。これは機能しますが、大きな問題が1つあります。イニシャル<li>にカーソルを合わせてサブメニューを表示した後、マウスポインタをそのサブメニューまたはサブメニュー<li>内に移動すると、サブメニューが非表示になります。明らかに、これは起こるはずではありません。デモを作成しましたjsfiddleでこれの。これを修正する方法はありますか？以前はサブメニューにCSS3トランジションを使用していましたが、要素の高さを0px（閉じた高さ）から値 "auto"（開いた高さ）に簡単に遷移できないことに気付いたときにjQueryに切り替えました。jQueryを使用すると、サブメニューを簡単にフルハイトに移行できるため、問題はなくなりましたが、この問題が発生し、修正方法がわかりません。サブメニューにカーソルを合わせたときにサブメニューを開いたままにする方法はありますか？

同様の質問を検索していくつか見つけましたが、それらを読んだ後、、、、ではなく、それらが関係していることがわかりました。これら<div's>の<ul>'sタグを使用するように変更してこれらの質問の回答をテストしたところ、正しく機能しませんでした。 。<li>'s<a>'s

4

1 に答える 1

4

これを試して

$(function($) {

 function showMenu() {
    $('#Menu ul').slideDown(500, "swing");
}

function hideMenu() {
    $('#Menu ul').slideUp(500, "swing");
}   
    $("li.hassublinks").hoverIntent({
        over: showMenu,
        timeout: 400,
        out: hideMenu
    });

});
于 2013-01-11T18:53:24.950 に答える