0

だから私は現在JQueryを試していますが、これまでのところナビゲーションは適切に機能しています。私はドロップダウンを追加するようになりましたが、それが問題を引き起こしているので、誰かがその理由を見ることができるかどうか疑問に思いました.

HTML:

<ul id="navigation">
        <li id="first" onclick="window.location='index.html';"><span id="logo"></span><span class="navigation-text">Home</span></li>
        <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span>
            <ul class="subnavigation">
                <li>Portfolio 1 Column</li>
                <li>Portfolio 2 Column</li>
            </ul>
        </li>
        <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">Gallery</span></li>
        <li class="standard"><span class="gallery_icon"></span><span class="navigation-text">GalleryGallery123</span></li>
    </ul>

JQuery:

<script type="text/javascript">
$(document).ready(function() {

    // On hover:
    $('#navigation li').hoverIntent(function () {
        width = $(this).children('span:nth-child(2)').width();
        text = $(this).children('span:nth-child(2)');          

        var newwidth = (width + 15) // Original width + 15px padding        
        text.filter(':not(:animated)').animate({"width":"1px"}, 0).show(); // Make the width 0px and make the element visible
        text.animate({"width":+newwidth+"px"}, 300); // Animate the width to the new size
        $(this).children('ul').slideDown('slow')

    },
    function () {
        text.animate({"width":"1px"}, 150); // Animate the width to 0px and hide the element
        text.animate({"width":+width+"px"}, 0);
        setTimeout(function() {
            $('#navigation li .navigation-text').hide();
        },100);
        $(this).children('.subnavigation').slideUp('slow');
    });

});

</script>

緑色のバーまたはドロップダウンを含まない LI にカーソルを合わせると、正常に機能します。開いて閉じて、もう一度やり直すと作業を続けます。ただし、ドロップダウンにカーソルを合わせてそのドロップダウンの最初の LI を保持すると、親が閉じる 2 番目の LI に移動し、最終的に間違ったサイズになり、ドロップダウンの最初の LI が非表示になります。

おそらく、あなたがそれで遊んで、私が何をしているのかを知っているなら、それがあまり意味があるかどうかわからないので、おそらく最善です.

JFiddle: http://jsfiddle.net/5NcHk/ ライブ: http://dev.evaske.com/Navigation/

4

2 に答える 2

1

li内のすべてに hoverIntent を作成します#navigation。これにはサブアイテムが含まれます。そのため、li の外にカーソルを合わせると、そのアイテムが非表示になります。

セレクターを次から変更します

$('ul#navigation li').hoverIntent(function () {

に

$('ul#navigation > li').hoverIntent(function () {
于 2013-03-20T11:20:02.127 に答える
0

hoverIntent イベント ハンドラーを nav 内のすべての li に割り当てています。これにより、あるサブメニュー項目から別のサブメニュー項目に移動すると、mouseout イベントがトリガーされます。"Portfolio Link 1" でイベントが発生しないようにマウスをすばやく動かし、2 番目のリンクに移動すると、問題なく動作します。リンク 1 にカーソルを合わせてからリンク 2 にカーソルを合わせた場合にのみ問題になります。

これを修正するには、mouseout ハンドラーを更新して、mouseout 操作を実行する前にマウスがまだサブメニュー内にあるかどうかを確認します。

于 2013-03-20T11:19:27.617 に答える