Question

我正在尝试为项目创建“卡片”。

这些卡可以这样工作：

默认情况下，每张卡片只显示3行文字。单击“扩展卡”链接时，卡将获得绝对定位，并且z-index将显示在其他元素上并打开。

为了防止卡片在绝对定位时移动，我将它们放在各自的容器中。

这是我的代码的本质:(检查fiddle）

HTML：

<div class="cardwrapper">
  <div class="card">
    <img src="http://lorempixel.com/800/800/people/3" />
    <p class="lead">John Doe</p>
    <p class="description">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
        <br/>sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        <br/>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p> 
    <a class="text-center card-button">extend</a>

  </div>
</div>

CSS：

.cardwrapper {
    width: 40%;
    position: relative;
}
.card {
    width: 100%;
    position: relative;
}


.description {
    position: relative;
    max-height: 3em;
    overflow: hidden;
    transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
}
.description-show .description {
    max-height: 500px;
}
.description-show-position {
    position: absolute !important;
    z-index: 1000 !important;
}

JavaScript / jQuery：

$('.card-button').click(function () {
    var card = $(this).parent();
    var cardWidth = card.css('width');

    if (!card.hasClass('description-show-position')) {
        card.toggleClass('description-show-position');
        card.toggleClass('description-show');
        card.css('width', cardWidth);
    } else {
        card.toggleClass('description-show');
        card.css('width', cardWidth);

        card.on('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function (e) {
            card.toggleClass('description-show-position');
        });
        card.off();
    }
})

我在代码中找不到问题，但有时它仍然与卡下的元素重叠。你认为这会导致什么？

有没有比使用包装器更好的方法呢？

修改

我意识到transitionend事件不会发生。为什么你认为可以呢？

Answer 1

我对您的代码进行了一些更改，现在看起来工作正常（您可以在此处查看：http://jsfiddle.net/5QaSu/7/

我所做的改变：

为cardwrapper类添加了一个高度（如上面的注释中所指定），以避免在折叠描述时出现重叠：
```
cardwrapper {
    width: 40%;
    position: relative;
    min-height:330px;
}
```

必须直接从父级而不是卡级调用transitionend事件：

card.parent().on('transitionend', function (e) {
    card.toggleClass('description-show-position');
});

添加了一个centinel变量来控制transitionend只被调用一次（抱歉，必须有更好的方法）：

card.parent().on('transitionend', function (e) {
    if (transition) {
        transition = false;
        card.toggleClass('description-show-position');
    }
});

Answer 2

如何在所有卡上设置绝对位置：card1将具有顶部：0，card2顶部是card1的高度，card3顶部是card1 + card2等？

独立容器中的绝对定位元素重叠

2 个答案: