创建主细节模式,使用响应式设计框架隐藏移动设备上的详细视图

Question

我正在寻找使用主 - 细节模式,其中主主视图包含项目列表并单击它在详细视图中加载与该项目相关的所有信息.使用bootstrap或foundation都可以正常工作.我还可以隐藏手机的详细视图.

我想要做的是点击主视图中的项目我想在移动设备中将视图更改为详细视图.我认为可以通过一些jquery隐藏主视图并在移动设备上显示详细视图.我不确定这是否是正确的方法,我想知道人们是如何解决这个问题的.任何angularjs/react特定建议都会更好.

Answer 1

我的方法是让className您的主视图由封闭组件中保存的状态决定。就像是;

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

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

单击主视图的元素后，masterViewClass相应地更改它，利用引导响应实用程序隐藏您不希望显示的元素。