Javascript 基于屏幕宽度的切换行为

这里的目标是使页面具有响应性和移动友好性

我在桌面上显示发票及其所有详细信息。但当视口缩小时，细节将被隐藏，并且可以在单击/轻敲时切换隐藏/取消隐藏

所以我有一个触发器和一个目标类

如果我在标记中将hide类添加到target中，这会像预期的那样起作用。但是我不能这样做，因为他们应该出现，除非用户在一个小屏幕上查看页面。我可以在媒体查询中设置display:none，但这会永久隐藏目标

---

我应该修改目标元素的什么属性，以便它在屏幕缩小时隐藏自己，并且可以使用hide类切换其视图

这一切都取决于你在做什么：

您可以使用JavaScript检测宽度，并在切换上添加特定类以显示宽度

$screenWidthCheck = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if ($screenWidthCheck > 1280) {
    $("#page-content").addClass('active');
}

然后你可以给它加一个偶数

$(window).resize(function() { 
    $screenWidthCheck = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    if ($screenWidthCheck > 1280) {
        $("#page-content").addClass('active');
    }
});

---

Javascript解决方案是添加一个钩子来加载和调整事件处理程序的大小，该钩子将检查屏幕宽度并相应地添加/删除类

$(window).on("load resize", function() {
    //Assuming you consider anything >= 1240 as desktop
    $('.target').toggleClass('hide', $(window).width() < 1240);
});

---

尝试使用。在此处理程序中，您可以检查windows大小在媒体查询中，设置显示：无；当屏幕宽度等于所需宽度时，通过JS执行.css{'display'：'block'}尝试使用$'.target'.toggle；如果您只想隐藏/显示它。使用display:none会导致我无法通过单击或轻触切换其视图。只要css规则适用，目标元素就会隐藏。这里还有其他css解决方案吗？好吧，您需要稍微更改一下您的点击处理程序，使其与我上面发布的css一起工作。让我补充几点。

$(window).on("load resize", function() {
    //Assuming you consider anything >= 1240 as desktop
    $('.target').toggleClass('hide', $(window).width() < 1240);
});

@media all and (min-width: 1240px) {
    .target {
        display: block;
    }
}
@media all and (max-width: 1239px) {
    .target {
        display: none;
    }
}