Question

我在构建我的在线设计组合时遇到了这个问题。这对我来说似乎很复杂，但我知道有办法做到这一点，所以我很沮丧，我找不到解决方案。请帮忙！

我的设计要求使用媒体查询来针对移动设备，平板电脑和台式机/笔记本电脑优化我的网站。移动版只有一列缩略图。单击每个缩略图时，通过jQuery slideToggle在其下方显示隐藏的div，按下其他项目缩略图。

这就是移动版本的工作方式，效果很好。问题是平板电脑和dektop /笔记本电脑版本。对于这些版本，我希望缩略图以网格图案显示。平板电脑上有两个并排，桌面/笔记本电脑上有三个并排，所有版本都有无限行。我可以使用HTML在网格中显示它们，但是当点击缩略图并通过slideToggle显示它下面的div时会出现问题。由于我正在使用媒体查询，HTML的顺序仍然与移动版本相同，隐藏的div直接位于代码中的每个缩略图下方。因此，显示隐藏的div会压缩所有其他缩略图，包括与单击的缩略图位于同一行的缩略图（如果它们在代码中跟在缩略图之后）。每行的最后一个div做我想要的;隐藏的div显示时，下一行被按下。我希望隐藏的div显示在它所在的行下面并按下下面行中的缩略图。

显然，我希望坚持使用媒体查询，以避免在可能的情况下创建单独的HTML。

为缩略图和隐藏的div重复HTML：

<div class="body">
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
    <div class="projectWrapper"></div>
    <div class="thumb"></div>
</div>

我创建了一个jsfiddle来演示问题： http://jsfiddle.net/EuHyc/13/

请注意使用jQuery隐藏div。使用CSS隐藏它们并不允许隐藏div中的内容在显示时正确显示。另外，我不得不使用display：inline-block，因为float：left不会强制隐藏的div在布局中显示在它下面。

我希望我充分解释了这个问题。在此先感谢您的帮助！我真诚地感激它！

通过slideToggle显示隐藏的div，而不会按下其他div

0 个答案: