获取活动宽度并折叠菜单

Get live width and collapse an menu

本文关键字:折叠 菜单 活动 获取      更新时间:2023-09-26

我有两天很难处理折叠菜单的代码。我真的很努力地想知道我做错了什么。

这个代码的问题是,当你调整浏览器的大小时,它将无法再次工作。

如果有人能帮助我,我将不胜感激。

$(document).ready(function(){
    function jqUpdateSize(){
        // Get the dimensions of the viewport
        var width = $(window).width();
        if(width<=768){
            $('.toggle-nav-this-site').css("display","block");  
            $('.toggle-nav-this-site .button-this-tg').click( function(){
                $('.aside-menu > ul').toggle('showElem');
            });
        }else{
            $('.toggle-nav-this-site').css("display","none");   
            $('.aside-menu > ul').show();   
        }

        $('#jqWidth').html(width);      // Display the width
    };
    $(document).ready(jqUpdateSize);    // When the page first loads
    $(window).resize(jqUpdateSize);     // When the browser changes size

});

我从未使用过jQuery,但使用普通JS,您首先必须添加一个EventListener:

window.addEventListener('resize', functionname);

这个被调用的函数必须更改所有变量。

您可以通过以下方式获取窗口大小:window.innerHeight, window.innerWidth