Javascript 始终在桌面上显示div，并在移动屏幕上单击切换

我有两个div，一个用作按钮，仅显示在手机屏幕上，另一个包含我希望在桌面上始终可见的信息，可以使用“显示/隐藏”按钮在手机上切换

在移动设备上，信息最初应隐藏。问题是当我在480px以下的屏幕上隐藏信息时，它在480px以上的屏幕上不可见

---

通过单击“显示/隐藏”按钮隐藏信息，然后扩展屏幕，您将在屏幕上发现注意事项，我希望在这种情况下信息可见

这是我的密码

$（文档）.ready（函数（）{
$（'.show hide'）。单击（函数（）{
$（this.next（）.toggle（）；
});
});
。显示隐藏{
背景色：#ffa2a2；
填充：8px；
显示：无；
}
.信息{
背景色：#a4dca4；
填充：8px；
}
@仅介质屏幕和（最大宽度：480px）{
.显示隐藏{
显示：内联块；
}
.信息{
显示：无；
}
}

显示/隐藏信息
这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，

通过单击“显示/隐藏”按钮隐藏信息，然后扩展屏幕，您将在屏幕上发现注意事项，我希望在这种情况下信息可见

这种行为是因为
toggle（）
调用直接向元素添加了
style
属性，而该属性很难用CSS覆盖，当媒体查询状态更改时，它需要这样做

要解决此问题，请改用
toggleClass（）
。然后，您可以在媒体查询之外忽略该类，以便始终显示该元素


$（文档）.ready（函数（）{
$（'.show hide'）。单击（函数（）{
$（this.next（）.toggleClass（'toggle'）；
});
});
。显示隐藏{
背景色：#ffa2a2；
填充：8px；
显示：无；
}
.信息{
背景色：#a4dca4；
填充：8px；
}
@仅介质屏幕和（最大宽度：480px）{
.显示隐藏{
显示：内联块；
}
.信息{
显示：无；
}
.information.toggle{
显示：块；
}
}

显示/隐藏信息
这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，

$（文档）.ready（函数（）{
$（'.show hide'）。单击（函数（）{
$（this.next（）.toggle（）；
});
$（窗口）。调整大小（函数（）{
如果（$（窗口）.width（）>480）{
$（'.information'）。切换（true）；
}否则{
$（'.information'）。切换（false）；
}
});
});
。显示隐藏{
背景色：#ffa2a2；
填充：8px；
显示：无；
}
.信息{
背景色：#a4dca4；
填充：8px；
}
@仅介质屏幕和（最大宽度：480px）{
.显示隐藏{
显示：内联块；
}
.信息{
显示：无；
}
}
@仅介质屏幕和（最小宽度：480px）{
.显示隐藏{
显示：无；
}
.信息{
显示：块；
}
}

显示/隐藏信息
这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，这里有些信息，
您的逻辑似乎在两种屏幕大小变化中都能正常工作，即绿色div在较大屏幕上始终可见，在较小屏幕上隐藏，并通过按钮进行切换。您的问题是什么？单击“显示/隐藏”按钮隐藏信息，然后展开屏幕，您将在屏幕上发现注意事项，我希望在这种情况下可以看到信息。啊，我理解您的问题。我在下面为您添加了一个答案