在列表视图中展开/显示和隐藏div元素

时间:2017-03-20 00:01:00

标签: javascript jquery html css

正如你所看到的,这是一个列表视图,我的任务是当你点击一个元素/ 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>

1 个答案:

答案 0 :(得分:0)

请尝试以下操作。

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

$('.content.equal a').click(function(event) {
  event.preventDefault();
});
&#13;
.images {
  display: none;
}
&#13;
<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>
&#13;
&#13;
&#13;