响应式设计＆amp;显示嵌套列表

Question

我目前正在尝试自学一些响应式设计，并且只想就解决问题的最佳方法提出一些意见。我决定首先让我的现有项目（https://github.com/antm611/MusicServerGUI）在移动设备上运行。我将通过剥离Twitter Bootstrap库并使用我自己的CSS来实现这一目标。

正如您在GitHub上的截图中所看到的，主要的＆＃39;专辑＆＃39;视图左侧有一个窗格用于选择艺术家，右侧有一个窗格用于显示所选艺术家的专辑。我用两个单独的无序列表实现了这一点。但是，我对具有较小视口的设备的计划是将其显示为一个列表，按以下结构排列：

• 艺术家1
• 艺术家2（已选中）
  • 专辑1
  • 专辑2（已选中）
    • Track 1
    • Track 2
  • 专辑3
• 艺术家3

如果我只是设计独立的移动网站，我会用嵌套列表实现这一点（如上所述）。但是，这需要实际的HTML不同。据我了解响应式设计，目标通常是使用相同的标记，但会根据媒体查询更改向用户显示的方式。

如果有人能指出我最好的＆＃39;解决这类问题的方法，我将非常感激。

非常感谢！

Answer 1

好吧，我在普通屏幕上的相同相册div中创建了一个UL元素，唯一的区别是它最初会有display: none，并且您在较小的视口上将其更改为display: block，同时将当前albums列设置为display: none。所以，基本上，它是一个切换事物（显示/隐藏）。