Question

对某些Javascript / JQuery代码有点问题。

我们使用的网站有两个菜单 - 一个用于桌面，另一个用于移动。桌面菜单直接指向页面，但移动版本具有网站某些部分的下拉子菜单的一些附加功能（如果扩展子菜单，则使用addClass方法等）。

通常情况下这可以正常工作 - 但似乎在Chrome中调整窗口高度可能会不时地导致代码被忽略。但是，再次使用高度可以让它再次起作用。

这是一个问题，尤其是在Android上的Chrome等移动设备上使用该网站时 - 因为隐藏的地址栏会导致窗口的高度调整 - 菜单功能停止工作。但是，当地址栏在屏幕上时 - 它可以正常工作。

它似乎是随机执行此操作，因为我无法在忽略代码时找到高度断点。

以下代码应进一步澄清情况

$(document).ready(function() {
    topnavigation(), window.innerWidth < 767 && ($("#services").click(function() {
        $(this).hasClass("expanded") ? $(this).removeClass("expanded") : $(this).addClass("expanded"), event.preventDefault(), $(".subnav2").toggle()
    }), $("#creative").click(function() {
        return $(this).hasClass("expanded") ? $(this).removeClass("expanded") : $(this).addClass("expanded"), $("#creativenav").toggle(), !1
    }), $("#marketing").click(function() {
        return $(this).hasClass("expanded") ? $(this).removeClass("expanded") : $(this).addClass("expanded"), $("#marketingnav").toggle(), !1
    }), $("#digital").click(function() {
        return $(this).hasClass("expanded") ? $(this).removeClass("expanded") : $(this).addClass("expanded"), $("#digitalnav").toggle(), !1
    }), $("#med-ed").click(function() {
        return $(this).hasClass("expanded") ? $(this).removeClass("expanded") : $(this).addClass("expanded"), $("#med-ednav").toggle(), !1
    })), 


    $(window).resize(function() {
        var width = jQuery(window).width();
        var height = jQuery(window).height();

        console.log(window.innerWidth);
        topnavigation(), window.innerWidth < 767 ? ($("#services").click(function() {
            $(this).hasClass("expanded") ? $(this).removeClass("expanded") : $(this).addClass("expanded"), event.preventDefault(), $(".subnav2").toggle()
        }), 

        $("#creative").click(function() {
            return $(this).hasClass("expanded") ? $(this).removeClass("expanded") : $(this).addClass("expanded"), $("#creativenav").toggle(), !1
        }), 

        $("#marketing").click(function() {
            return $(this).hasClass("expanded") ? $(this).removeClass("expanded") : $(this).addClass("expanded"), $("#marketingnav").toggle(), !1
        }),

         $("#digital").click(function() {
            return $(this).hasClass("expanded") ? $(this).removeClass("expanded") : $(this).addClass("expanded"), $("#digitalnav").toggle(), !1
        }), 

         $("#med-ed").click(function() {
            return $(this).hasClass("expanded") ? $(this).removeClass("expanded") : $(this).addClass("expanded"), $("#med-ednav").toggle(), !1
        })) : $("#services").click(function() {
            $(".subnav2").hide(), window.location = "#"
        }), 

        window.innerWidth >= 768 && ($(".nav-collapse").removeClass("opened"), $(".nav-collapse").addClass("closed"), $(".nav-collapse").css("position", "absolute"), $(".nav-collapse").removeClass("expanded"), $(".nav-toggle").removeClass("active"), $(".subnav2").hide())
    })


})

我将指出topnavigation（）不是此问题的一个因素 - 因为这是一个粘性导航并删除粘性导航功能仍然导致这个基于高度的问题。

为什么会出现这种情况还有其他原因吗？

window.resize和window.innerwidth高度问题？

0 个答案: