Question

我有一个响应式网站，有一些jQuery代码，其中一些是以下内容：

 <script>
    $(document).ready(function(){
        $("#D1000C36LPB3").click(function(){$("#D1000C36LPB3_details").show();});
        $("#D1200C36LPB3").click(function(){$("#D1200C36LPB3_details").show();});
        $("#D1-3CA36LPB3").click(function(){$("#D1-3CA36LPB3_details").show();});
        $("#D1-0CA36LPB3").click(function(){$("#D1-0CA36LPB3_details").show();});
        $("#D700S36LPB3").click(function(){$("#D700S36LPB3_details").show();});
        $("#D700S24LMB3").click(function(){$("#D700S24LMB3_details").show();});
    });
</script>

上面的所有div元素（#D1000C36LPB3_details，#D1200C36LPB3_details，#D1-3CA36LPB3_details ...）的CSS display属性值为{{1} }，所以默认情况下它们是不可见的，直到您点击上面none，div，#D1000C36LPB3 ...之后的#D1200C36LPB3个元素之一，然后显示相应的div。

但是，当jQuery脚本运行时，它会将相应的#D1-3CA36LPB3 div值设置为display。当视口的窗口宽度小于400 px时，我希望脚本使用block显示它们。

我的建议

我已经发现我可以使用以下方式显示固定位置：

position: fixed;

但是我仍然不得不让jQuery运行第一个脚本（使用$("#corresponding_ID").css("display", "fixed");的脚本）。

Answer 1

不要以这种方式直接设置css样式。如已经评论过，使用例如.visible课程，让 css媒体查询 决定。例如：

@media screen and (max-width: 399px) {
  .visible {
    display: fixed;
  }
}
@media screen and (min-width: 400px) {
  .visible {
    display: block;
  }
}

然后，在您的点击处理程序中，执行以下操作：

$("#D1000C36LPB3").click(function(){$("#D1000C36LPB3_details").addClass('visible');});

此外，如果您的详细信息容器都遵循该命名方案并将_details添加到id，那么更容易将所有ID放入数组并迭代：

$(document).ready(function(){
  var ids = [ "#D1000C36LPB3", "#D1200C36LPB3", "#D1-3CA36LPB3", "#D1-0CA36LPB3", "#D700S36LPB3", "#D700S24LMB3"];
  for (var i = 0; i < ids.length; i++) {
    $(ids[i]).on('click', function () { $(ids[i]+'_details').addClass('visible'); }
  }
};

Answer 2

使用Jquery检查浏览器宽度的简便方法：

var width = $(window).width(); 
if (width >= 1024) { 
  -- Code to execute here --
}else{
 -- Other code to execute here --
}

然后你可以调整你正在寻找的宽度，并根据你想要做的事情更新＆gt; =。

如果这没有意义，请告诉我。

如果窗口的宽度小于值，则不运行脚本

我的建议

2 个答案: