Question

我的网站上有以下代码：

<!-- Boat weather widget -->
<div id="boat_weather_tab_container">
    <div id="boat_weather_tab">
        <script type="text/javascript" src="widget.js"></script>
    </div>
    <div id="boat_weather_tab_button">
        <img src="images/blank150.gif">
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $("#boat_weather_tab_button").click(function(){
        // boat_weather_tab_hidden = 1 on page load
        if (boat_weather_tab_hidden) {
            $("#boat_weather_tab").animate({
                marginTop: "-1px"
            }, 500);
            boat_weather_tab_hidden = 0;
        } else {
            $("#boat_weather_tab").animate({
                marginTop: "-254px"
            }, 500);
            boat_weather_tab_hidden = 1;
        }
    });
});
</script>

现在客户希望#boat_weather_tab不仅在点击#boat_weather_tab_button时向上滑动，而且当用户点击页面上的任何其他位置时，我理解这相当于父容器的时间div #boat_weather_tab_container失去了焦点。

我需要做什么才能实现这个目标？

Answer 1

也许

$(document).click(function(event)
{
 if(boat_weather_tab_hidden==0 && $("#boat_weather_tab").queue()==0 )
 {
   $("#boat_weather_tab").animate({
                marginTop: "-254px"
            }, 500);
            boat_weather_tab_hidden = 1;

 }
});

未经测试，但想法是文档点击现在只会隐藏当前没有动画的船

Answer 2

您可以使用blur event。这实际上是失去焦点的行为。

$("#boat_weather_tab_container").blur(function() {
    //code to run on blur
});

当<div>失去焦点时，jQuery动画</div>

2 个答案: