Javascript 在不同的屏幕大小上显示和隐藏内容

我使用了一个只在手机和平板电脑屏幕上显示的可折叠按钮。但当点击手机上的“少显示”按钮时，桌面上的内容也会隐藏我不想要的内容。我该如何解决这个问题

函数myFunction（）{
var x=document.getElementById（“myDIV”）；
console.log（x.style.display）；
如果（x.style.display==“无”| |！x.style.display）{
x、 style.display=“block”；
document.getElementById（“moreButton”）.innerText=“显示较少”；
}否则{
x、 style.display=“无”；
var a=document.getElementById（“servicenav”）；
document.getElementById（“moreButton”）.innerText=“显示更多”；
a、 单击（）；
}
}
window.onresize=函数（事件）{
如果（event.currentTarget.outerWidth>=1026）{
控制台信息（“显示”）；
$（“myDIV”）.show（）；
}否则{
控制台信息（“隐藏”）；
$（“#myDIV”）.hide（）；
}
}

显示更多

欢迎使用堆栈溢出！请访问，看看有什么和。做一些研究，搜索相关话题等；如果你被卡住了，张贴一篇你尝试的文章，记下输入和预期输出，最好是在一篇文章中。请首先查看媒体查询您的

#myDIV

元素是否丢失？没有，按钮位于#myDIVno内，您的代码中没有

！这回答了你的问题吗？