正如你所看到的,这是一个列表视图,我的任务是当你点击一个元素/ 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>
答案 0 :(得分:0)
请尝试以下操作。
$('.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;