当我尝试在移动设备上隐藏桌面菜单时，桌面菜单会离开屏幕

Question

我有两个菜单(左和右(和一个搜索栏。当用户激活菜单时，它们会像预期的那样从屏幕边缘滑动。单击/点击搜索栏时，菜单将向后滑动。这在移动设备上按预期工作，但是当单击桌面版本的搜索栏时，右侧菜单会离开屏幕。*注意 - 我只包含两个媒体查询，为了简单起见，CSS 是非常基本的。你能解释一下我在这里做错了什么吗？这是一个Jsfiddle：

[code]
https://jsfiddle.net/54rzcv7f/5/ 
[/code]

*注意 - 请记住在 JavaScript 选项卡上选择无换行正文。

Answer 1

更新的答案：

我的建议是使用类。由于右侧菜单需要根据屏幕大小移动不同的距离，因此添加和删除类可能效果最好。

Javascript：

input.addEventListener('focusin', function() {
    message.classList = "searchFocus"; 
});
input.addEventListener('focusout', function() {
    message.style="";
    message.classList = ""; 
});

.CSS：

@media screen and (max-width:450px) and (min-width:321px){  
    .searchFocus{
       transform:translate(105%, 0%)!important;
    }
}
@media screen and (max-width:1920px) and (min-width:451px){ 
     .searchFocus{
         transform:translate(52%, -90%)!important;;
     }
}    

这仍然会让你发生一些时髦的事情，比如你展开菜单然后调整大小，但这与焦点没有任何关系。在 js 中使用类似的方法，只需在屏幕大小调整超过特定大小(如 451px(时清除内联样式即可。

希望这有帮助！