根据屏幕宽度切换行为

Question

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

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

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

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

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

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

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');
    }
});

Answer 2

Javascript解决方案是添加一个挂钩来load和resize事件处理程序的resize事件处理程序将检查屏幕宽度并相应地添加/删除类。

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

CSS解决方案：

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