使用jQuery显示/隐藏调整大小的div？

Question

我试图在页面低于某个屏幕宽度时隐藏页面上的div，然后如果浏览器调整回到断点上方，则再次显示它。

我正在使用我在网上找到的脚本并且效果很好，但断点似乎没有正常工作。我将div设置为隐藏，如果屏幕低于768px并显示其是否超过768px但由于某种原因，它发生在784px而不是。

以下是我正在使用的代码：

$(document).ready(function() 
{
    //window
    var $window = $(window);

    //display nav
    var displayNav = true;

    //on resize get widths
    getWidths();
    $window.resize(getWidths);

    //set width of content to the needed widths
    function getWidths()
    {
        var browserWidth = $window.width();

        if ((browserWidth <= 768) && (displayNav == true))
        {
            displayNav = false;
            toggleNav();
        }
        else if ((browserWidth > 768) && (displayNav == false))
        {
            displayNav = true;
            toggleNav();
        }
    }

    //toggle nav
    function toggleNav()
    {
        $(".secondaryNav").toggle();
    }
});

有什么想法吗？谢谢！

Answer 1

Straight CSS bro。

@media all and (min-width: 768px) {
    .secondaryNav {
        display: none;
    }
}