0

我有一个弹出搜索框，当用户将鼠标悬停在超链接上时会显示该搜索框，当用户将鼠标移出搜索框时，该框就会消失。这工作正常。当文本框有焦点时，搜索框应该保持可见，直到文本框失去焦点，此时如果光标不在框上方，框将隐藏。这适用于除 IE 之外的所有浏览器（具体为 IE7）。在 IE 中，文本框的 blur 事件在文本框的 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>
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 回答