سؤال

ولدي مربع البحث المنبثقة التي تظهر عندما يصطاد الفئران المستخدم على ارتباط تشعبي، عندما يصطاد الفئران المستخدم من مربع البحث، يختفي مربع. هذا يعمل بشكل جيد. عندما يكون النص التركيز، ويفترض مربع البحث على البقاء مرئية حتى يفقد النص التركيز، في الوقت الذي مربع وإخفاء إذا كان المؤشر لم ينته مربع. هذا يعمل بشكل جيد في جميع المتصفحات باستثناء IE (IE7 أن تكون محددة). في IE، يتم تشغيل الحدث طمس من النص على mouseout من النص يختبئ بشكل فعال مربع البحث. هنا هو رمز كنت قد كتبت:

<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>
هل كانت مفيدة؟

المحلول

والمشكلة تبدو أنك توثيق صلته الأحداث دون غير ملزم لهم. لذلك، هناك ينتهي به الأمر الأحداث المتعددة التي النار إظهار وإخفاء مربع اعتمادا على عدد المرات التي حدث التركيز وطمس الحدث. ولست متأكدا بالضبط لماذا تفشل في 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>

نصائح أخرى

<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>
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top