我有一个输出一堆 div 的 mvc 视图。都有一类userproject。那是 div 上唯一的类。但是,当我调用 toggleClass 时,它应该将 div 从一个小 div 动画到一个大 div 以便查看所有文本。动画在同一 div 上的页面上为每个 div 运行一次。
jQuery
$(document).ready(function () {
$(".userproject").click(function (e) {
$(this).toggleClass("userprojectclicked", "slow");
});
});
css
.userproject
{
float: left;
border:2px solid;
border-radius:5px;
width: 270px;
padding: 15px;
margin: 5px;
position: relative;
background-color: green;
overflow:hidden;
}
.userprojectclicked
{
width: 900px;
background-color: white;
border-color: green;
}
在循环中查看下面的 div 输出。
<div class="userproject">
<p>@Html.LabelFor(m => @Model.Name) : @Html.DisplayFor(m => Model.Name)</p>
<p>@Html.LabelFor(m => @Model.Description) : @Html.DisplayFor(m => Model.Description)</p>
<p>@Html.LabelFor(m => @Model.UserId) : @Html.DisplayFor(m => Model.UserId)</p>
<p>@Html.LabelFor(m => @Model.CategoryId) : @Html.DisplayFor(m => Model.CategoryId)</p>
</div>
问题是动画为页面上的每个 div 发生一次......但它发生在同一个 div 上,所以它变大然后变小......大然后小......等等。有谁知道为什么?