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");
});

这是一个小提琴，展示了我想要实现的目标：http://jsfiddle.net/yeyene/fpPJz/3/（用户yeyene的信用，来自question）

到目前为止，这是我项目的picture（我希望扩展列表项高度，将链接移动到更低位置并在点击时向上移动）

提前谢谢！

Answer 1

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

这里有一个简单的小提示，展示了如何使用＆＃34; pure＆＃34;只需在容器中添加一个类：https://jsfiddle.net/8ea3drce/

为了更好的衡量，以下是上述JS小提琴中使用的代码：

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');
})

Answer 2

使用Dom答案中显示的classtoggling的想法，正确设置绝对位置的锚点并删除干扰高度属性解决了这个问题！

在按钮上单击显示信息向上滑动并使用jQuery向上推按钮

2 个答案:

HTML

CSS

使用Javascript / jQuery的