0

私は次のコードのメニューを持っています：

    <div id="head_navigation">
     <ul>
         <li><a href="javascript:void(0);"><img src="img/start.jpg" width="57" height="40" title="start" alt="" /></a></li>
         <li><a href="javascript:void(0);"><img src="img/favoriten.jpg" width="87" height="40" title="favoriten" alt="" /></a></li>
        </ul>
    </div>

    <div id="head_subnavigation">
     <ul id="start" class="hidden">
         <li><div class="button"><a href="javascript:void(0)" onclick="cwload('arztauswertung.html','start');" title="Rezeptsuche"><img src="img/icons/icon_rezeptsuche_on.png" width="50" height="62" alt="Rezeptsuche" /><br />Rezeptsuche</a></div></li>
         <li><div class="button"><a href="javascript:void(0)" onclick="cwload('arztauswertung.html','start');"><img src="img/icons/icon_zuzahlung_on.png" width="50" height="62" alt="Zuzahlung" /><br />Zuzahlung</a></div></li>
         <li><div class="button"><a href="javascript:void(0)" onclick="cwload('arztauswertung.html','start');"><img src="img/icons/icon_abrechnung_on.png" width="50" height="62" alt="Abrechnung" /><br />Abrechnung</a></div></li>
        </ul>
    </div>

「#head_subnavigation」にはCSS「display：none」があります。タイトルが「start」の画像にカーソルを合わせると、IDが「start」の<ul>が表示されます。等々。

正常に動作しますが、私の問題は「マウスアウト」です。'#head_navigation'にMouseoutEventを使用すると、サブメニューのliアイテムにカーソルを合わせると、サブナビゲーションが消えます。私が言いたいことが分かっている？？？

「head_navigation」divまたは「#head_subnavigation」divの別のliアイテムにジャンプする場合にのみ、Mouseoutを使用するにはどうすればよいですか。ただし、マウスを使用して「 head_navigation 」から「head_subnavigation」に移動する場合は使用できません。誰か助けてもらえますか？多くのことを試しました-実際には何も機能しません...:(

それをありがとう。

あいさつ、サシャ

明確化

タイトル属性に基づいて、画像$（'＃head_navigation img'）の上にサブナビゲーションが表示されるネストされたナビゲーションメニューがあります。

サブナビゲーションまたは画像のいずれかからマウスを離すまで、サブナビゲーションを開いたままにしておきたいです。

4

2 に答える 2

0

最も簡単な方法は、すべてのメニューをより大きなDIVにラップし、そのDIVのmouseoutイベントでメニューを非表示にすることです。また、常に1つのサブメニューのみが表示されていることを確認する必要があります（たとえば、新しいメニューを表示するときに開いているメニューを非表示にします）。

于 2009-11-16T19:27:23.377 に答える
-1

あなたはこれを行うことができます：

$('#head_navigation li a').hover(function(){

    // Hide the visible subnavigations
    $('#head_subnavigation ul:visible').css('display','none');

    // Show the appropriate subnavigation
    $('#head_subnavigation ul#' + $(this).attr('title')).css('display','block');

});

これにより、新しいトップレベルのナビゲーションliにマウスを合わせると、現在表示されている#head_subnavigationulが非表示になります。ユーザーがメニュー領域を完全に離れたときにmouseoutイベントを処理するには、ナビゲーション全体をdivでラップする必要があります。

$('#navigationDiv').mouseout(function(){

    $('#head_subnavigation ul:visible').css('display','none');

});

divをラップする場合の問題は、メニューがdivを超えている場合、mouseoutイベントが発生し、メニューが非表示になることです。あなたが取ることができる別のアプローチがあります...

// Globals
var menuHoverTimer = 0;
var menuHoverTimerLimit = 3; // 3 seconds
var menuHoverTimerIntervalID;

function stopHoverTimer(){
    clearInterval(menuHoverTimerIntervalID);
}
function resumeHoverTimer(){
    // This will run the menuHoverHandler function every 1 second
    menuHoverTimerIntervalID = setInterval(menuHoverHandler, 1000);
}
function menuHoverHandler(){
    menuHoverTimer++;
    if(menuHoverTimer > menuHoverTimerLimit) {
        stopHoverTimer();
        $('#head_subnavigation ul:visible').css('display','none');
        menuHoverTimer = 0;
    }
}

次に、各ホバーアクションで、マウスオーバーでstopHoverTimer（）を実行し、マウスアウトでresumeHoverTimer（）を実行します。私がその設定をしている方法では、ユーザーがメニューにマウスを合わせていない3秒後に、メニューが非表示になります。短くしたいと思うかもしれません。

于 2009-11-16T19:27:17.823 に答える