1

通过点击功能激活隐藏内容的四个模块。只需单击图像或 lorem 段落，您就会看到隐藏的内容。

http://codepen.io/anon/pen/Gvcxd

最终，这是为了响应式设计。因此，列的数量将根据视口大小以及每个模块与媒体查询定义的距离而变化。

我想修改这个脚本，以便另一列上的模块不会移动。换句话说，当您单击“ONE”时，唯一移动的模块是“THREE”，因为它在下方。“二”和“四”应该保持不变。

以下是它的简单外观：

1 2         ( <---This is a faux-row, since it's not coded to be a row)
3 4

当我点击 2 的切换按钮时，它看起来像这样（H 表示隐藏内容）：

1 2
  H
3 4

3 已被推下，这不应该发生。相反，我希望它是这样的：

1 2
3 H
  4

是否可以具有此切换脚本功能，以便单击功能仅影响其下方的人造列？

4

2 回答 2

2

您可以使用 z-index 执行此操作，因为您基本上只是希望文章在其下方元素的顶部向下滑动。

使用您在上面列出的基本模式，我整理了一个简短的示例。您必须对其进行一些调整以完全适应您正在做的事情，但它展示了这个概念。

HTML

<div id="wrapper">
    <div id="one" class="main-block">ONE
        <div class="article">blah blah blah</div>
    </div>
    <div id="two" class="main-block">TWO
        <div class="article">blah blah blah</div>
    </div>
    <div id="three" class="main-block">THREE
        <div class="article">blah blah blah</div>
    </div>
    <div id="four" class="main-block">FOUR
        <div class="article">blah blah blah</div>
    </div>
    <div id="five" class="main-block">FIVE
        <div class="article">blah blah blah</div>
    </div>
    <div id="six" class="main-block">SIX
        <div class="article">blah blah blah</div>
    </div>
</div>

CSS

.main-block {
    position: relative;
    float: left;
    z-index: 1;
    height: 50px;
    width: 75px;
}
.article {
    position: absolute;
    width: 50px;
    z-index: 2;
}
#wrapper {
    position: relative;  
    width: 150px;    
}

jQuery

$('.article').hide();

$('.main-block').click(function() {
    $(this).children('.article').slideToggle('slow');
});

你也可以在这个jsfiddle上玩它

于 2012-09-26T02:17:13.370 回答
0

如果我理解正确，您可以切换visiblity: hidden而不是使用display: none，因此该元素仍将位于 DOM 等中，但将是完全透明的：

https://developer.mozilla.org/en-US/docs/CSS/visibility

于 2012-09-25T20:04:42.507 回答