1

検索結果をフィルタリングするために使用するナビゲーション バーがあります。私は物事をきれいで適切なサイズに保とうとしているので、基本的にホバー時にフィルターオプションのラベルを非表示にし、選択するドロップダウンメニューに置き換える JQuery .hover 関数があります。

私の唯一の問題は、ラベルにカーソルを合わせてメニューをドロップダウンすると、マウスを動かしてliの境界内に表示されていないオプションを選択すると、ホバリングしていると見なされ、選択が非表示になることです。ラベルを示します。

選択メニューがドロップされ、オプションを選択しようとしているときに、ホバー機能がオフになっていると思わないようにするアイデアはありますか?

$('li').hover(
    function(){
        $(this).children('.nav_label').hide();
        $(this).children('.nav_select').show();
    },
    function(){
        $(this).children('.nav_label').show();
        $(this).children('.nav_select').hide();
    }
);

<li><p>
    <div class="nav_label">Menu Options</div>
    <div class="nav_select" style="display:none;">
    <select >
        <option value="" selected="selected">Choose an Option</option>
        <option value="option1">option1</option>
        <option value="option2">option2</option>
        <option value="option3">option3</option>
    </select>   
    </div>
</p></li>
4

1 に答える 1

0

したがって、これを行うための素晴らしい方法はないと思います。IE と FF では、選択ドロップダウン リストが li コンテナーの外部に存在するため、ホバー アウト イベントがトリガーされるようです。

したがって、ドロップダウン リストにフォーカスがあるかどうかを確認する必要があります。その場合は、選択リストを再非表示にしないでください。

http://jsfiddle.net/mrtsherman/kpwJ9/3/

:focus セレクターは jQuery 1.6+ です。古い jQuery を使用している場合に備えて、アクティブな要素を表示するログ ステートメントを含めます。その周りに独自のソリューションをコーディングできると確信しています。html を少し変更しましたが、既存の html 構造に jquery を追加して実装できるはずです。私はそれが答えに関連しているとは思わない。

$('li').hover(

function() {
    $(this).children('.nav_label').hide();
    $(this).children('.nav_select').show();
}, function() {
    console.log(document.activeElement.id);
    if (!$('#myList').is(':focus')) {
        $(this).children('.nav_label').show();
        $(this).children('.nav_select').hide();
    }
});
于 2011-10-07T19:53:31.147 に答える