javascript - 根据屏幕宽度切换行为

Question

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

我在桌面上显示了一张包含所有详细信息的发票。但是当视口(viewport)缩小时，细节会被隐藏，并且可以在点击/点击时切换(隐藏/取消隐藏)。

所以我有一个 trigger 和一个 target 类。

$('.trigger').click(function(){
    $('.target').toggleClass('hide');
})

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

我应该修改 target 元素的什么属性，以便它在屏幕尺寸减小时隐藏自己，并且我可以使用 hide 类切换它的 View ？

Answer 1

这完全取决于你在做什么:

您可以使用 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');
    }
});