使用媒体查询更改 JQuery

Question

我的页面上有一个侧导航，页面宽度为 30%。我希望它在 768px 断点处更改为 100% 页面宽度。我将如何使用 JQuery 执行此操作？

这是我的代码

function openNav() {
    document.getElementById("mySidenav").style.width = "30%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}

Answer 1

            //  your sidebar
            var sidebar = $("aside");
            updateSibarWidth();
            $(document).ready(function() {
                $(window).resize(function() {
                    updateSibarWidth();
                });
            });
            // Function to update the width of the sidebar!
            function updateSibarWidth() {
                if($(window).width() < 768) {
                        sidebar.width("100%") ;
                    } else {
                        sidebar.width("30%") ;
                    }
            }

    .rect {
        width:150px;
        height:150px;
        background-color: rgb(21, 181, 202);
    }

<body>

        <aside class="rect">sidebar</aside>
       
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </body>