css - 滑动切换无法正常工作

标签 css asp.net-mvc-3

我正在使用 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/

相关文章:

html - 在菜单按钮中移动文本

c# - 使用 Entity Framework Code First 版本 5 中的 SQL View

asp.net-mvc-3 - asp.net mvc提交表单并在url中显示所有表单参数

asp.net-mvc - 允许并行性和效率的 Asp.net MVC 页面构建的最佳实践是什么?

CSS超链接样式

html - 剪辑路径多边形 - 剪切图像但保持原始图像大小

asp.net-mvc - MVC3 应用程序中客户端主从 View 编辑器的建议

asp.net - 用户组的 session 超时不同

html - IE8定位,噩梦!

javascript - 如何将单独的 JS 文件、CSS 文件和 HTML 文件合并在一起?