jquery 向下滑动和向上滑动摆动 div
jquery slidedown and slideup wiggles div
http://eusville.com/eusVote/1/baltimore-sushi
点击"Add Comment/Rate"按钮。当评论框向下滑动时,页面会摆动。我很困惑。谷歌搜索但找不到解决方案。
奇怪的是问题出在 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>
<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> <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 />
您遇到的问题是因为页面的高度大于视口的高度。这意味着将出现一个滚动条。
将此添加到您的 css,它可能会解决您的问题
html {
overflow-y: scroll;
}
从您的 slideDown()
和 slideUp()
函数中删除参数:
crBox.slideDown();
...
crBox.slideUp();
滚动条将页面推过一点。两种解决方案是始终显示滚动条或始终隐藏滚动条。
始终显示:
body{
overflow: scroll;
}
始终隐藏它:
::-webkit-scrollbar {
display: none;
}
如果您要始终隐藏它,我还会添加 "always show it" 代码。原因是 "hide it" 代码覆盖了 "show it",如果您的浏览器不支持 "show it" 代码,它会提供一种后备。
http://eusville.com/eusVote/1/baltimore-sushi
点击"Add Comment/Rate"按钮。当评论框向下滑动时,页面会摆动。我很困惑。谷歌搜索但找不到解决方案。
奇怪的是问题出在 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>
<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> <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 />
您遇到的问题是因为页面的高度大于视口的高度。这意味着将出现一个滚动条。
将此添加到您的 css,它可能会解决您的问题
html {
overflow-y: scroll;
}
从您的 slideDown()
和 slideUp()
函数中删除参数:
crBox.slideDown();
...
crBox.slideUp();
滚动条将页面推过一点。两种解决方案是始终显示滚动条或始终隐藏滚动条。
始终显示:
body{
overflow: scroll;
}
始终隐藏它:
::-webkit-scrollbar {
display: none;
}
如果您要始终隐藏它,我还会添加 "always show it" 代码。原因是 "hide it" 代码覆盖了 "show it",如果您的浏览器不支持 "show it" 代码,它会提供一种后备。