Question

我有这个脚本，它在表单输入焦点中显示一个简单的工具提示。我想要做的是在屏幕小于767px时隐藏工具提示div。

我已经尝试添加@media查询显示：无，但是当我将屏幕大小调整为桌面大小而工具提示div不显示时，这不起作用。

我尝试了这个jQuery脚本，但这也不起作用：

$(window).resize(function() {
    if ($(this).width() < 767) {
       $('div.tip').hide();
    }
});

如果我使用else { $('div.tip').show(); }，当我将屏幕调整为桌面大小时，它会在页面上显示所有隐藏的工具提示。

jsfiddle

有什么建议吗？

Answer 1

谢谢大家的建议。我设法让这个东西运转起来。在else语句中添加整个脚本很简单。

$('div.tip').hide();        

$(window).on('load resize', function(){
    if (window.matchMedia("(max-width: 767px)").matches) {
            $('div.tip').hide();
        } else {
            $('.display-tooltip').on('blur', function() {
            $(this).parent().siblings('div.tip').fadeOut(200);
        });

        $('.display-tooltip').on('focus', function() {
            $(this).parent().siblings('div.tip').fadeIn(200);
        });

        $(".display-tooltip").first().focus();
        }
});

jsfiddle

Answer 2

您需要在其他情况下显示相应的div，请尝试此demo，

// Hide tooltip if screen is smaller than 767
$(window).resize(function() {
    if ($(this).width() < 767) {
        $('div.tip').hide();
    }
    else{
        $('div.tip').show();
    }
});

Jquery：如果屏幕小于，则隐藏表单输入焦点上的工具提示

2 个答案: