使用jQuery在foreach循环中的按钮单击上创建切换div，并使用绝对和相对定位

我创建了一个视图，它有一个foreach循环，使用绝对和相对定位显示框中的每个项目，从而创建了一个列表

我想创建一个按钮并将其连接到jQuery，这样在单击它时，下一个列表项将临时向下推，同时它将显示包含我要显示的信息的div（再次按下时将其隐藏）。由于列表项具有固定的高度，我可以始终为div保留空格，但如果可能，我希望采用前一种方式

下面是一张图片，希望能帮助我实现目标： hr-s属于它们下面的列表项，因此您看到的hr-s应该是第一个向下推的项目，以及页面的其余部分

非常感谢您的帮助

编辑：到目前为止，我只为它创建了空白解决方案，包括代码、各自的样式和我用于它的jQuery

观点：

<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">content</div>
    </div>
  </li>
</ul>

jQuery：

var toggleBet = $(".toggleBet");
toggleBet.on("click", function () {
    console.log("bet clicked");
    $(this).parent().next(".betContent").slideToggle("slow");
});

---

不需要

parent（）

，因为

.betContent

紧挨着

.toggleBet

。检查jquery，如下所示

var toggleBet = $(".toggleBet");
toggleBet.on("click", function () {
    console.log("bet clicked");
    $(this).next(".betContent").slideToggle("slow");
});

---

不需要

parent（）

，因为

.betContent

紧挨着

.toggleBet

。检查jquery，如下所示

var toggleBet = $(".toggleBet");
toggleBet.on("click", function () {
    console.log("bet clicked");
    $(this).next(".betContent").slideToggle("slow");
});

---

这不是一个编码服务，请告诉我们你自己做了什么来创建这个，我做了，对不起，如果需要更多信息，请告诉我。这不是一个编码服务，请告诉我们你自己做了什么来创建这个，我做了，对不起，如果需要更多信息，请告诉我。绝对正确，我在那个街区试了一会儿，一定是把它忘在那儿了，谢谢！当然是真的，我用那个块试了一段时间，一定是把它忘在那里了，谢谢！