javascript - 在按钮上单击显示信息向上滑动并使用 jQuery 向上插入按钮

Question

我有一个 foreach 循环，它使用相对和绝对定位显示元素列表，在底部我想添加一个按钮(位于容器底部)，按下时显示/隐藏给定信息，自己按下按钮。我查看了几个基本相同的问题的 stackoverflow 问题，但我找不到适合我的情况的解决方案。

以下是问题的代码(因为我尝试了几个解决方案，样式位置可能不合逻辑，如果您发现任何奇怪的地方请告诉我):

观点:

<ul class="events>
@foreach (var events in Model)
{
//absolute positioned div-s
  <li>
    <div class="eventActions">
            <button class="toggleBet">Place bet</button>
            @Html.ActionLink("Event details", "Details", "Event", new { eventId = events.Id }, null)
            <div class="betContent">@Html.Partial("_BetPartial", new BetViewModel(events))</div>

        </div>
  </li>
</ul>

样式:

.events > li .eventActions {
    position: absolute;
    bottom: 0;
    right: 0;
    font-size: 24px;
    height: 200px;

}

.events > li .toggleBet {
    display: inline-block;

}

.events > li .betContent {
    background-color: green;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 1s;
}

.events > li .eventActions.open .betContent {
    max-height: 300px;
}

jQuery:

$(".toggleBet").on("click",function(e) {
    $(this.parentNode).toggleClass("open");
});

这是一个显示我想要实现的目标的 fiddle :http://jsfiddle.net/yeyene/fpPJz/3/ (感谢用户 yeyene，来自 question )

这里是 picture到目前为止我的元素(我想扩展列表项的高度，将链接移低并在单击时使它们向上移动)

提前致谢!

Answer 1

我建议忘记 .slideToggle 方法，只在父容器上使用 CSS 类，然后使用 max-height 属性在打开和关闭之间切换(或者只是 height 如果您已经确切知道打开时容器应该有多大)。

这里有一个简单的 fiddle ，展示了如何通过向容器中添加一个类来使用“纯”CSS 做到这一点:https://jsfiddle.net/8ea3drce/

---

为了更好地衡量，下面是上面 JS fiddle 中使用的代码:

HTML

<div class="container">
  <a class="trigger">Trigger</a>
  <ol class="content">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ol>
</div>

CSS

.container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.container .trigger {
  display: inline-block;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 1em;
}

.container .content {
  background-color: lightblue;
  margin: 0;
  max-height: 0; // This suppresses the element's height.
  overflow: hidden; // This keeps internal elements from being visible when height is suppressed.
  transition: max-height .5s; // This animates the motion when max-height is released. This isn't usually perfect. The closer max-height comes to be with the actual height of the element, the better. Fixed heights might be ideal.
}

.container.open .content {
  max-height: 300px; // This releases the element's height to be as large as it would naturally be, up to 500px.
}

Javascript/jQuery

$('.trigger').on('click', function(e) {
    $(this.parentNode).toggleClass('open');
})