0

ユーザーがハイパーリンクの上にマウスを置いたときに表示されるポップアップ検索ボックスがあります。ユーザーが検索ボックスからマウスを離すと、ボックスが消えます。これはうまくいきます。テキストボックスにフォーカスがある場合、検索ボックスは、テキストボックスがフォーカスを失うまで表示されたままになるはずです。フォーカスが失われた時点で、カーソルがボックスの上にない場合、ボックスは非表示になります。これは、IE (具体的には IE7) を除くすべてのブラウザーでうまく機能します。IE では、テキスト ボックスのマウスアウト時にテキスト ボックスのブラー イベントが発生し、検索ボックスが効果的に非表示になります。ここに私が書いたコードがあります：

<script type="text/javascript">
    $(document).ready(function() {
         //add mouseover event to the search button to show the search box
        $(".search").mouseover(
            function() {
                $(".open").show();
            });

        //add mouseout event to the search button to show the hide box
        $(".search").mouseout(
            function() {
                $(".open").hide();
            });

        //add mouseover event to the search box so it doesnt hide when the user attempts to click the box
        $(".open").mouseover(
            function() {
                $(".open").show();
            });

        //add mouseout event to the search box so it doesnt hides when the users mouse exits the box
        $(".open").mouseout(
            function() {
                $(".open").hide();
            });

        //don't ever hide the search box when the textbox has focus
        $("#tbSearch").focus(
            function() {
                $(".open").mouseout(
                    function() {
                        $(".open").show();
                    });
            });

        //hide the search box when the textbox loses focus
        $("#tbSearch").blur(
            function() {
                $(".open").hide();
                $(".open").mouseout(
                    function() {
                        $(".open").hide();
                    });
            });


    });
</script>

HTML は次のとおりです。

<a class="search" href="#"><span>Search</span></a>
<div class="open">
    <input id="tbSearch" type="text" />
    <a class="go" href="#"><span>Go</span></a>
</div>
4

2 に答える 2

1

問題は、イベントをバインド解除せずに再バインドしているようです。そのため、フォーカス イベントとブラー イベントが発生した回数に応じて、ボックスの表示と非表示を実行する複数のイベントが発生することになります。何らかの理由でIEで失敗する理由は正確にはわかりませんが、ソリューションには可動部分が多すぎるように見えるため、どこで失敗しているのかを正確に判断するのは困難です.

テキストボックスの状態（フォーカスまたはぼかし）を維持する属性を使用して、過去にこのタイプのものを機能させることができました。これを試してください：

<script type="text/javascript">

$(function() {

var showBox = function() {
    $(".open").show();
};
var hideBox = function() {
    if (!$(".open").attr("searching")) {
        $(".open").hide();
    }
};

$(".search").hover(showBox, hideBox);
$(".open").hover(showBox, hideBox).hide();

    $("#tbSearch").focus(function() {
    $(".open").attr("searching", "true");
    }).blur(function() {
    $(".open").removeAttr("searching");
    $(".open").hide();
});
});

</script>
于 2009-04-30T22:04:41.403 に答える
0 
<script type="text/javascript">
    $(document).ready(function() {
         //add mouseover event to the search button to show the search box
        $(".search").bind('mouseenter mouseleave',function(){
                $(".open").toggle();
         });

        //add mouseover event to the search box so it doesnt hide when the user attempts to click the box
        $(".open").bind('mouseenter mouseleave',function(){
                $(".open").toggle();
        });

        //don't ever hide the search box when the textbox has focus
        $("#tbSearch").focus(function() {
                $(".open").show();
        });

        //hide the search box when the textbox loses focus
        $("#tbSearch").blur(
             $(".open").hide();
        });

    });
</script>
于 2009-05-01T15:03:02.283 に答える