jQuery Slidedown和Slideup摆动div

纳米书呆子

http://eusville.com/eusVote/1/baltimore-sushi

点击“添加评论/费率”按钮。当注释框向下滑动时,页面会摆动。我很沮丧。围绕Google搜索,但找不到解决方案。

奇怪的是问题出在Chrome和Firefox中。IE浏览器工作顺利...

HTML div是:...对不起,那里有很多剃须刀。只是忽略@s ...

jQuery上下滑动此Div。

提示赞赏!TIA。

$(".buttonAddCommentRate").click(function () {    
    var crBox = $(this).closest('.answer-container').find('.answer-commentRateBox');    
    var buttonText = $(this).text();

    if (buttonText == 'Add comment/rate') {
        crBox.slideDown(300);
        $(this).text('Cancel comment/rate');
    }
    else {
        crBox.slideUp(300);
        $(this).text('Add comment/rate');
    }
});
.answer-comment{
    width:600px;
         float: left;
}
.answer-textArea{
    width: 500px;
    height: 180px;     
}

.answer-commentRateBox{
   display:none;
   overflow: hidden;   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="answer-container">
            <div class="answer-main">
                <h4>@Model.ElementAt(i).Title</h4>

                @Model.ElementAt(i).Detail<br /><br />

                <button class="buttonAddCommentRate" data-id="@Model.ElementAt(i).AnswerID">Add comment/rate</button>&nbsp;&nbsp;&nbsp;&nbsp;
                <span class="span-buttonAddCommentRate">Log in to comment and/or rate</span>
            </div>

            <div class="answer-eusScore">
                eusScore (<span class="answer-count">@Model.ElementAt(i).Count</span>)<br /><br />
                <span class="span-answer-eusScore">@(Math.Round((decimal)(Model.ElementAt(i).RatingScore)))%</span>
            </div>
            <div class="answer-thankYou">
                Rating/comment posted
            </div>

            <br style="clear:both" />

            <div class="answer-commentRateBox">
                <br />
                <div class="answer-comment">
                    <textarea class="answer-textArea" placeholder="Comment must be more than 5 words ..."></textarea>
                </div>

                <div class="answer-rateIt">
                    <input data-id="@Model.ElementAt(i).AnswerID" type="number" class="rating" min=0 max=5 step=0.5 data-size="sm"><br />
                    <br /><br />
                    <button class="buttonSubmit" disabled data-id="@Model.ElementAt(i).AnswerID">Submit</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button class="buttonCancel">Cancel</button><br />
                    <span id="span-enable-message" style="font-size:smaller">(rate to enable)</span>
                </div>
                <br style="clear:both" />
            </div>

            <div>
                @*displays the comments using a partial view*@
                @{Html.RenderAction("Comments", "Topic", new { answerID = @Model.ElementAt(i).AnswerID });}
            </div>

        </div>

        <hr />

y

您遇到的问题是由于页面的高度大于视口而导致的。这意味着将出现一个滚动条。

将此添加到您的CSS中,可能会解决您的问题

 html {
     overflow-y: scroll;
 }

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

slideUp和slideDown jQuery

来自分类Dev

同级div slideDown时的jQuery slideUp

来自分类Dev

如何使用jQuery slidedown和slideup

来自分类Dev

jQuery:下拉导航slideDown和slideUp

来自分类Dev

jQuery slideDown,slideUp摇摆

来自分类Dev

jQuery SlideDown,slideUp

来自分类Dev

jQuery slideDown,slideUp摇摆

来自分类Dev

jQuery fadeOut和SlideUp,然后fadeIn和SlideDown

来自分类Dev

jQuery fadeOut和SlideUp,然后fadeIn和SlideDown

来自分类Dev

jQuery slideUp()和slideDown()函数在奇数时间触发

来自分类Dev

使用AngularJS和jQuery修改DOM(slideDown / slideUp)

来自分类Dev

在jQuery中的replaceWith上添加SlideUp和Slidedown动画

来自分类Dev

jQuery:Hover上的Slidedown li和滑出时的SlideUp

来自分类Dev

jQuery slideUp和slideDown移动版的替代品

来自分类Dev

jQuery-在链中随机调用slideUp和slideDown

来自分类Dev

如何通过代码测试jquery .slideDown()和slideUp()?

来自分类Dev

jQuery slideUp / slideDown不动画

来自分类Dev

jQuery v1.11和v2.1 slideUp和slideDown不尊重CSS显示属性

来自分类Dev

使用slideDown()和slideUp()的jQuery显示/隐藏动画无法正常工作

来自分类Dev

slideDown,slideUp在jQuery中不起作用

来自分类Dev

jQuery: Slidedown li on Hover and SlideUp on mouse out

来自分类Dev

jQuery slideUp()影响其他列表的slideDown()

来自分类Dev

单击单选按钮时的jQuery slidedown()slideup()

来自分类Dev

jQuery toggle / slideDown / slideUp无法正常工作

来自分类Dev

如何将两个不同元素的jQuery动画slideUp和slideDown链接在一起

来自分类Dev

如何将两个不同元素的jQuery动画slideUp和slideDown链接在一起

来自分类Dev

slideDown和slideUp问题

来自分类Dev

jQuery slideup影响div的上部

来自分类Dev

总是在淘汰赛中使用jQuery slideUp slideDown

Related 相关文章

  1. 1

    slideUp和slideDown jQuery

  2. 2

    同级div slideDown时的jQuery slideUp

  3. 3

    如何使用jQuery slidedown和slideup

  4. 4

    jQuery:下拉导航slideDown和slideUp

  5. 5

    jQuery slideDown,slideUp摇摆

  6. 6

    jQuery SlideDown,slideUp

  7. 7

    jQuery slideDown,slideUp摇摆

  8. 8

    jQuery fadeOut和SlideUp,然后fadeIn和SlideDown

  9. 9

    jQuery fadeOut和SlideUp,然后fadeIn和SlideDown

  10. 10

    jQuery slideUp()和slideDown()函数在奇数时间触发

  11. 11

    使用AngularJS和jQuery修改DOM(slideDown / slideUp)

  12. 12

    在jQuery中的replaceWith上添加SlideUp和Slidedown动画

  13. 13

    jQuery:Hover上的Slidedown li和滑出时的SlideUp

  14. 14

    jQuery slideUp和slideDown移动版的替代品

  15. 15

    jQuery-在链中随机调用slideUp和slideDown

  16. 16

    如何通过代码测试jquery .slideDown()和slideUp()?

  17. 17

    jQuery slideUp / slideDown不动画

  18. 18

    jQuery v1.11和v2.1 slideUp和slideDown不尊重CSS显示属性

  19. 19

    使用slideDown()和slideUp()的jQuery显示/隐藏动画无法正常工作

  20. 20

    slideDown,slideUp在jQuery中不起作用

  21. 21

    jQuery: Slidedown li on Hover and SlideUp on mouse out

  22. 22

    jQuery slideUp()影响其他列表的slideDown()

  23. 23

    单击单选按钮时的jQuery slidedown()slideup()

  24. 24

    jQuery toggle / slideDown / slideUp无法正常工作

  25. 25

    如何将两个不同元素的jQuery动画slideUp和slideDown链接在一起

  26. 26

    如何将两个不同元素的jQuery动画slideUp和slideDown链接在一起

  27. 27

    slideDown和slideUp问题

  28. 28

    jQuery slideup影响div的上部

  29. 29

    总是在淘汰赛中使用jQuery slideUp slideDown

热门标签

归档