使用媒体查询更改JQuery



我的页面上有一个侧导航,它的页面宽度为30%。我希望在768px断点处将其更改为100%页面宽度。我该如何使用JQuery来完成这项工作?

这是我的代码

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

//  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>

最新更新