Question

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

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

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

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

如果我在标记中将hide类添加到target，这可以正常工作。但除非用户在小屏幕上查看页面，否则我不能这样做。我可以在媒体查询中设置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事件处理程序添加一个钩子，用于检查屏幕宽度并相应地添加/删除该类。

$(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;
    }
}

根据屏幕宽度切换行为

2 个答案: