javascript - Angularjs 根据屏幕大小隐藏和显示响应

Question

大家好，我正在努力实现这一目标

当用户在桌面上时，他应该在访问页面时看到 block ，用户在移动设备上时应该看到按钮，然后他应该能够切换它。

我可以通过设置使用 CSS 媒体查询显示按钮 display: none 当屏幕尺寸为 <480px 并且还能够恢复 display: none 通过添加 ng-click="showBlocks={'display': 'block'} block

但我不确定当我再次点击它时我如何才能让它在某种意义上起作用它应该再次隐藏 block 。

我已经尝试过 ng-hide/show 但它不起作用，除非我删除移动尺寸的 display:none 并且当我删除它时我无法看到这些 block 第一次访问该页面。

请帮助我，我在这上面浪费了很多时间。提前致谢

Answer 1

如果没有代码示例，则很难判断您的位置。如果您设法获得隐藏 block 的按钮(就像您用 ng-click="showBlocks={'display': 'block'} 所说的那样)，那么添加一个变量就足够了。添加这个到按钮元素:

ng-init="show=true;"ng-click="show = !show; showBlocks={'display': (show?'block':'none')};"

如果可行，则将初始化逻辑移至 Controller 以保持整洁。