javascript - 在 ListView 中展开/显示和隐藏 div 元素

Question

如您所见，这是一个 ListView 吗？我的任务是当您单击一个元素/div，然后带有图像的 div 展开/显示。现在这很容易，即使对于后端开发人员来说也是如此，但我想: 1.当我再次点击同一个元素时，该元素将隐藏。 2. 当我点击另一个元素时，已经展开的元素将隐藏，而我点击的另一个元素将展开/显示。 为此，我需要脚本和 CSS。

<div class="row">
                @foreach(var post in CurrentPage.Children) 
                {
                    <div class="col-md-12">
                        <div class="content equal" onclick="showhide()">
                            <a href="@post.Url">
                                <div class="date">@post.CreateDate.ToLongDateString()</div>
                                <h2>@post.Name</h2>     
                                <p>@Umbraco.Truncate(post.Introduction, 240, true)</p>
                            </a>
                        </div>
                        <div class="images(-expand)">
                            <img src="@post.Image" />
                        </div>
                    </div>
                }
            </div>

Answer 1

尝试如下。

$('.content.equal').click(function() {
  $('.content.equal').not(this).next().slideUp();
  $(this).next().slideToggle();
});

$('.content.equal a').click(function(event) {
  event.preventDefault();
});

.images {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-12">
  <div class="content equal">
    <a href="@post.Url">
      <div class="date">12-01-2017</div>
      <h2>Name1</h2>
      <p>@Umbraco.Truncate(post.Introduction, 240, true)</p>
    </a>
  </div>
  <div class="images">
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
  </div>
</div>
<div class="col-md-12">
  <div class="content equal">
    <a href="@post.Url">
      <div class="date">12-01-2017</div>
      <h2>Name1</h2>
      <p>@Umbraco.Truncate(post.Introduction, 240, true)</p>
    </a>
  </div>
  <div class="images">
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
  </div>
</div>
<div class="col-md-12">
  <div class="content equal">
    <a href="@post.Url">
      <div class="date">12-01-2017</div>
      <h2>Name1</h2>
      <p>@Umbraco.Truncate(post.Introduction, 240, true)</p>
    </a>
  </div>
  <div class="images">
    <img src="http://i164.photobucket.com/albums/u8/hemi1hemi/COLOR/COL9-6.jpg" />
  </div>
</div>