jQuery slideDown（）無法正常工作

Question

我有一個包含3個部分的表格。 在表單的開頭，后兩個部分使用css隱藏。 用戶按下第一部分中的下一個按鈕后，第二部分應向下滑動到視圖中，但是當前向下滑動的動畫開始，然后立即重置。 有人知道這個問題嗎？

jQuery腳本：

<script> 
        $(document).ready(function(){
            $("#buttonToSecondaryDetailsSection").click(function(){
                $("#secondaryDetailsForm").slideDown("slow");
            });

            $("#buttonToCommentsSection").click(function(){
                $("#commentsDetailsForm").slideDown("slow");
            });
        });
</script>

有問題的CSS：

#secondaryDetailsForm, #commentsDetailsForm {
display: none;
}

編輯：我嘗試使用.show（）而不是slideDown（）之前，該部分只是閃爍，然后再次消失。

編輯2：e.preventDefault（）; 做到了。 很抱歉出現這個混亂的問題，試圖給出一個使用jsfiddle的示例，但是它向左和向右拋出錯誤。

Answer 1

這可以解決您的問題。 考慮到您的描述，我想您的按鈕的作用超出了應有的程度，實際發生的是頁面正在刷新到原始狀態。 你可以試試這個嗎？

    $(document).ready(function(){
        $("#buttonToSecondaryDetailsSection").click(function(e){
            e.preventDefault();
            $("#secondaryDetailsForm").slideDown("slow");
        });

        $("#buttonToCommentsSection").click(function(e){
            e.preventDefault();
            $("#commentsDetailsForm").slideDown("slow");
        });
    });

與您的代碼的不同之處在於，將e作為事件參數，然后停止使用按鈕進行的​​任何其他操作。 如果我對問題的描述是實際發生的情況，那么它應該適用於此更改。

Answer 2

我猜想在添加到組件的效果之后，它將采用您之前給他的css屬性。

<script> 
        $(document).ready(function(){
            $("#buttonToSecondaryDetailsSection").click(function(){
                $("#secondaryDetailsForm").slideDown("slow");
                $("#secondaryDetailsForm").css("display","block");
            });

            $("#buttonToCommentsSection").click(function(){
                $("#commentsDetailsForm").slideDown("slow");
                $("#secondaryDetailsForm").css("display","block");
            });
        });
</script>

由於缺乏您提供給我們的代碼，我無法制作jsFiddle，但請嘗試一下。

Answer 3

使用此代碼：在我的工作端，腳本沒有任何變化（您使用的是相同的jquery代碼）。 檢查您的HTML。 並嘗試使用e.preventDefault(); 正如上面的“ thanpa ”所提到的

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
#secondaryDetailsForm, #commentsDetailsForm {
display: none;
height:200px;
}
#section1{
height:200px;
}
</style>
<div id = 'section1'>
<p>Section 1</p>
<button id ='buttonToSecondaryDetailsSection'> click me </button>
</div>
<div id = 'secondaryDetailsForm'>

<p>Section 2</p>
<button id ='buttonToCommentsSection'> click me </button>
</div>
<div id = 'commentsDetailsForm'>

<p>Section 3</p>
</div>

<script>
      $(document).ready(function(){
            $("#buttonToSecondaryDetailsSection").click(function(){
                $("#secondaryDetailsForm").slideDown("slow");
            });

            $("#buttonToCommentsSection").click(function(){
                $("#commentsDetailsForm").slideDown("slow");
            });
        });
</script>