javascript - jQuery:根据窗口宽度更改 jQuery

Question

我有一些 jQuery 想要根据屏幕宽度进行更改。当页面加载时，我希望脚本确定窗口宽度 var = width，并根据该宽度选择一组函数。但是，如果用户要调整屏幕大小，我希望脚本重新定义 width 并再次选择哪一组函数。

jQuery

$(document).ready(function () {


    var width = $( window ).width();

    // Should I use this commented-out function below somehow???

//  $(window).resize(function() {
//      width = $( window ).width();
//  });

    // Navbar functionality
    // for large screens
    if ( width > 767 ) {
        $(".navbar-link").on("click", function() {
            var el = $(this);
            var dd = el.siblings();

            var loc = el.offset();
            var left = loc.left;
            var width = el.width();
            var center = left + (0.5 * width);
            var corrected_center = center - 5;

            var isDown = dd.hasClass('down');
            var numDown = $(document).find(".down").length;

            // if there ARE dropdowns present, quickly hide / show
            if ( numDown > 0 ) {
                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").hide();
                }

                // display the clicked link
                if (!isDown) {
                    dd.addClass('down');
                    dd.show();
                }

            // if there are NO dropdowns present, animate w/ slide
            } else {

                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").hide();
                }

                if (!isDown) {
                    dd.addClass('down');
                    dd.slideDown();
                    console.log($(".rest").css("top"));
                    $(".rest").animate({"top": "105px"});
                }
            }   

            var isActive = el.hasClass('activate');
            $(".navbar-link").removeClass('activate');

            $(".arrow-up").css("left", corrected_center);

            if (isActive) {
                $('.arrow-up').hide(400);
            } else {
                $('.arrow-up').show();
                el.addClass('activate');
            }
        });

    // For small screens
    } else {

        $(".navbar-link").on("click", function() {

            var el = $(this);
            var dd = el.siblings();
            var isDown = dd.hasClass('down');
            var numDown = $(document).find(".down").length;

            $(".dropdown-nav").removeClass('down');

            // if there ARE dropdowns present, quickly hide / show
            if ( numDown > 0 ) {
                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").slideUp();
                }

                // display the clicked link
                if (!isDown) {
                    dd.addClass('down');
                    dd.slideDown();
                }

            // if there are NO dropdowns present, animate w/ slide
            } else {

                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").hide();
                }

                if (!isDown) {
                    dd.addClass('down');
                    dd.slideDown();
                }
            }   
        });
    }
});

Answer 1

我发现解决此问题的最简单方法是在点击事件后获取屏幕宽度。单击 -> 获取宽度 -> 如果屏幕 > 767 执行 {}，否则执行 {}。这可以在下面看到。

$(document).ready(function () {

    $(".navbar-link").on("click", function() {
        var el = $(this);
        var dd = el.siblings();

        var loc = el.offset();
        var left = loc.left;
        var width = el.width();
        var center = left + (0.5 * width);
        var corrected_center = center - 5;

        var isDown = dd.hasClass('down');
        var numDown = $(document).find(".down").length;

        var screenWidth = $( window ).width();

        // check width to determine how to proceed

        if ( screenWidth > 767 ) {
        // if there ARE dropdowns present, quickly hide / show
            if ( numDown > 0 ) {
                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").hide();
                }

                // display the clicked link
                if (!isDown) {
                    dd.addClass('down');
                    dd.show();
                }

            // if there are NO dropdowns present, animate w/ slide
            } else {

                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").hide();
                }

                if (!isDown) {
                    dd.addClass('down');
                    dd.slideDown();
                    console.log($(".rest").css("top"));
                    $(".rest").animate({"top": "105px"});
                }
            }   

            var isActive = el.hasClass('activate');
            $(".navbar-link").removeClass('activate');

            $(".arrow-up").css("left", corrected_center);

            if (isActive) {
                $('.arrow-up').hide(400);
            } else {
                $('.arrow-up').show();
                el.addClass('activate');
            }

        // for small screens
        } else {
            // if there ARE dropdowns present, quickly hide / show
            if ( numDown > 0 ) {
                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").slideUp();
                }

                // display the clicked link
                if (!isDown) {
                    dd.addClass('down');
                    dd.slideDown();
                }

            // if there are NO dropdowns present, animate w/ slide
            } else {

                $(".dropdown-nav").removeClass('down');

                // if THIS dropdown is down, animate w/ slide
                if (dd.css("display") === "block") {
                    $(".dropdown-nav").slideUp();

                // if ANOTHER dropdown is down, switch quickly
                } else {
                    $(".dropdown-nav").hide();
                }

                if (!isDown) {
                    dd.addClass('down');
                    dd.slideDown();
                }
            }
        }
    });
});