angularjs - 使用响应式设计框架创建隐藏移动设备上的详细 View 的主细节模式

Question

我希望使用主从模式，其中主视图包含项目列表，单击它会在详细 View 中加载与该项目相关的所有信息。使用 Bootstrap 或基础都可以很好地工作。我还可以隐藏手机的详细 View 。

我想做的是，当单击主视图中的项目时，我想将 View 更改为移动设备中的详细 View 。我认为可以使用一些 jquery 来隐藏主视图并在移动设备上显示详细 View 。我不确定这是否是正确的方法，我想知道人们是如何解决这个问题的。任何 angularjs/react 的具体建议会更好。

Answer 1

我的方法是让主视图的 className 由封闭组件中保存的状态确定。类似的东西；

<MasterView className={this.state.masterViewClass} />

(显然进行了更改以适合您的代码，您可能希望将其应用于特定标签而不是整个 react 元素)。

单击主视图的某个元素时，利用 Bootstrap 相应地更改其masterViewClass Responsive Utilities隐藏您不想显示的元素。