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

时间:2013-04-25 02:00:21

标签: media-queries slidetoggle css

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

我的设计要求使用媒体查询来针对移动设备,平板电脑和台式机/笔记本电脑优化我的网站。移动版只有一列缩略图。单击每个缩略图时,通过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在布局中显示在它下面。

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

0 个答案:

没有答案
豫ICP备18024241号-1