Question

具有由点击功能激活的隐藏内容的四个模块。只需点击图片或lorem段落，您就会看到隐藏的内容。

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

我想修改此脚本，以便其他列上的模块不会移动。换句话说，当你点击“ONE”时，唯一移动的模块是“THREE”，因为它在下面。 “TWO”和“FOUR”应保持静止。

以下是它看起来简单的方式：

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

是否可以使用此切换脚本功能，以便点击功能仅影响其下方的虚拟列？

Answer 1

您可以使用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

上玩它

Answer 2

如果我理解正确，您可以切换visiblity: hidden而不是使用display: none，这样该元素仍然会在DOM等中，但会完全透明：

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

我可以在不影响下面所有模块的情况下切换浮动模块吗？

2 个答案: