Question

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

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

*注意 - 请记住在JavaScript选项卡上选择No wrap in body。

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）时清除内联样式。

希望这有帮助！

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

1 个答案: