Question

我在这里为父级提供了一个定义的宽度，即'30％'，并且该父级是jquery库的sidenav。我想根据设备的屏幕尺寸使用onClick事件更改其宽度，使用javascript，如“100％”，宽度小于600px，“30％”，宽度超过600px。我已经尝试过使用css媒体查询但是css属性被javascript覆盖了。请帮忙怎么做。

 $('.menu-list a').click(function (e) {
     e.preventDefault();
     var hide = $(this).data("hide");

     if (hide == true) {
         $(this).parent().parent().animate({
             width: '30%'
         }, 800);
         $('#mobile li').css('display', 'none');
         $('#mobile .close').css('display', 'block');
         $('#mobile .user-logo').css('display', 'none');
     } else {
         $(this).parent().parent().animate({
             width: '30%'
         }, 800);
         $('#mobile li').css('display', 'none');
         $('#mobile .close').css('display', 'block');
         $('#mobile .user-logo').css('display', 'block');
         $('#mobile .user-logo #edit-btn').css('display', 'inline-block');
     }

     var url = $(this).attr('href');
     $.ajax({
         url: url,
         beforeSend: function (data) {
             $('#content-here').html(loader);
         },
         dataType: 'html',
         success: function (data) {
             setTimeout(function () {
                 $('#content-here').html(data);
             }, 1000);
         }
     });

     $('#mobile #content-here').css('display', 'block');
 });

Answer 1

CSS媒体查询将是一种更简单的解决方案。

element{
  width:30%;
}
@media (max-width: 600px) {
  element {
    width:100%
  }
}

如果您仍想使用jQuery：

$("yourElement").css({"width":"30%"});
if(screen.width<"600") $("yourElement").css({"width":"100%"});

Answer 2

只需使用此jquery函数即可找到窗口宽度： $（窗口）.WIDTH（）; 你的代码就像：

if($(window).width() > 600){ 
//make sidenav 30% 
}
if($(window).width() < 600){
//make sidenav 100%
}

只需将此代码粘贴到click事件中即可。首先，您必须在单击事件内缓存宽度，以便每次单击按钮时计算宽度。希望你理解逻辑。

根据屏幕尺寸改变元素的宽度

2 个答案: