Question

我正在使用Razor语法开发MVC应用程序。我试图Slidetoggle 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>

问题的摘要是，在调用Jscript之前，Div会被切换。怎么避免呢？

Answer 1

使用css将隐藏的div设置为隐藏。这样，当你切换它时它将被关闭并滑开。

滑动toggeling无法正常工作

1 个答案: