我正在使用 Razor 语法开发 MVC 应用程序。 我正在尝试滑动切换 Div,这意味着当我单击一个 Div 时,其他 div 应该展开。 加载后它工作正常,但为什么它在页面加载时已经扩展了? 但在我的应用程序中它已经扩展/切换。
如何解决?
@model IEnumerable<CRMEntities.Comment>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!DOCTYPE html>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function clearText()
{
document.getElementById('Comment').value = "";
}
</script>
<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".ShowComments").click(function () {
$(".ParentBlock").slideToggle("slow");
});
});
</script>
<style type="text/css">
div.ParentBlock
{
position:relative;
}
div.ShowComments
{
position:relative;
}
</style>
</head>
<body>
@{
<p class="ShowComments">Show Comments</p>
<div class="ParentBlock">
@foreach (var item in Model)
{
<div id="OwnerName">
<span class="EmpName"> @Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { @style = "color:#1A6690;" })</span>
@Html.DisplayFor(ModelItem => item.CommentDateTime)
</div>
<div id="CommentTextBlock">
@Html.DisplayFor(ModelItem => item.CommentText)
</div>
<br />
}
</div>
@Html.TextArea("Comment", "", 5, 80, "asdsd")
<input type="button" value="Add Comment"/>
<input type="button" value="Clear" onclick="clearText()"/>
}
</body>
</html>
问题的总结是,Div 在调用 Jscript 之前被切换。 如何避免呢?
最佳答案
将应该隐藏的div设置为用css隐藏。这样,当您切换它时,它将关闭并滑动打开。
关于css - 滑动切换无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12406356/