3

マウスオーバーでテキストボックスを広げ、マウスオフで短くするためのこのスクリプトがあります。

私が抱えている問題は、InternetExplorerが選択ボックスのオプションにカーソルを合わせても拡張されていないように見えることです。

つまり、IEでは、選択をクリックしてオプションをドロップダウンできますが、オプションを選択しようとすると、選択ボックス自体から移動するとすぐに、選択ボックスが消えてサイズが変更されます。

サンプルコード：

<script type='text/javascript'>
$(function() {
$('#TheSelect').hover(
    function(e){
        $('#TheText').val('OVER');
        $(this).width( 600 );
    },
    function(e){
        $('#TheText').val('OUT');
        $(this).width( 50 );
   }
);
});
</script>

と：

<input type='text' id='TheText' /><br /><br />

<select id='TheSelect' style='width:50px;'>
    <option value='1'>One</option>
    <option value='2'>Two</option>
    <option value='3'>Three</option>
    <option value='42,693,748,756'>Forty-two billion, six-hundred and ninety-three million, seven-hundred-forty-some-odd..... </option>
    <option value='5'>Five</option>
    <option value='6'>Six</option>
    <option value='7'>Seven...</option>
</select>

IEの選択ボックスの回避策はありますか？誰かが本当に信頼できるものを推薦できるなら、私はjqueryの置き換えを検討するでしょう。

ありがとう！

4

5 に答える 5

12

この投稿はしばらく続いているようですが、回避策に興味を持っている人がまだいることを願っています。作業中の新しいサイトを構築しているときに、この問題が発生しました。その上に製品スライダーがあり、製品ごとにマウスを合わせると、製品に関する情報、購入オプションを選択するためのドロップダウン、および購入ボタンを含む大きな情報バブルがポップアップ表示されます. マウスが選択メニューの最初の表示領域から離れると (つまり、オプションを選択しようとすると)、バブル全体が消えることがすぐにわかりました。

その答え (jQuery を開発した賢明な人々に感謝します) は、すべてイベント バブリングに関するものでした。問題を修正する最も簡単な方法は、ホバーのアウト状態を一時的に「無効にする」必要があることを私は知っていました。幸いなことに、jQuery には、イベントのバブリングを処理するための機能が組み込まれています (彼らはこれを伝播と呼んでいます)。

基本的に、約 1 行程度の新しいコードで、ドロップダウンの「onmouseleave」イベントにメソッドをアタッチしました (選択リストのオプションの 1 つにマウスを合わせると、このイベントが確実にトリガーされるようです - 他のいくつかのイベントを試しました、しかしこれはかなりしっかりしているように見えました) イベントの伝播をオフにしました (つまり、親要素はドロップダウンから "onmouseleave" イベントについて聞くことができませんでした)。

それだけでした！ソリューションは、私が期待していたよりもはるかにエレガントでした。次に、マウスがバブルを離れると、ホバーのアウト状態が正常にトリガーされ、サイトはビジネスを続行します。これが修正です（document.readyに入れました）：

$(document).ready(function(){
  $(".dropdownClassName select").mouseleave(function(event){
    event.stopPropagation();
  });
});
于 2009-05-01T15:59:19.713 に答える
7

どうやらIEはselect要素のドロップダウンビット部分を考慮していないようです。実行可能ですが、マウスが要素のドロップダウン部分に入ったときに「非表示」効果を有効または無効にするには、expando プロパティとぼかし/フォーカス イベントを少しごまかす必要があります。

これを試してください：

$(function() {
    var expand   = function(){ $(this).width(600) }
    var contract = function(){ if (!this.noHide) $(this).width(50) }
    var focus    = function(){ this.noHide = true }
    var blur     = function(){ this.noHide = false; contract.call(this) }
    $('#TheSelect')
        .hover(expand, contract)
        .focus(focus)
        .click(focus)
        .blur(blur)
        .change(blur)
});

（これがjQueryの使用方法ではない場合は申し訳ありません-私はこれまで使用したことがありません:)）

于 2008-10-16T01:51:08.693 に答える
1

WorldWideWeb の回答は完璧に機能しました。

少し異なる問題がありました.フォームフィールドの含まれているアイテム（ホバーして選択メニューを表示する）にホバー効果があり、IEユーザーはドロップダウンから選択できませんでした（値をリセットし続けました）。worldweb の提案 (select の ID 付き) と viola を追加したところ、うまくいきました。

これが私がしたことです：

$(".containerClass").hover(function() {
    $(this).children("img").hide();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });
}, function() {
    $(this).children('img').show();
    $('#idOfSelectElement').mouseleave(function(event) { event.stopPropagation(); });

});
于 2009-12-02T19:17:27.870 に答える
1

ホバーに基づいて非表示/表示されるフォームがありました。ユーザーが選択にフォーカスすると、フォームは非表示になりました。私はこのようなもので私の問題を解決することができました:

element.find('select').bind('mouseenter mouseleave',function(){
    //Prevent hover bubbling
    return false;
});
于 2013-01-08T00:19:44.537 に答える
0

同じ問題があり、WorldWidewebb の回答は IE8 で非常にうまく機能しました。セレクターに選択ボックスのクラスを含めたので、セレクターから「select」を削除して、わずかな変更を加えました。それを本当に簡単な修正にしました。

また、hoverIntent jquery プラグインを使用するメニューに問題なく実装しました。(干渉なし)。

于 2009-08-12T00:39:25.357 に答える