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。并尝试使用＆＃34; thanpa ＆＃34;中提到的e.preventDefault();上述

<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>

Jquery slideDown（）无法正常工作

3 个答案: