我有一个用于评论的文本区域和一个用于显示或隐藏它的按钮(切换)。如果我想默认隐藏它(显示:无),当我点击按钮显示它时,样式被破坏但如果它没有隐藏(显示: block )我可以毫无问题地点击,样式会很好。
html:
<a id="1" class="comment_button a_button" title="Dejar un comentario">Comentar</a>
<div id="hide_1" class="rows" style="display: none;">
<ul id="UL_101">
<!-- New comment row -->
<li class="newComment_row">
<div class="userComments_photo">
<img class="photo" src="/images/profile/' . $_SESSION['photo'] .'" alt="" />
</div>
<textarea id="' . $imgID . '" class="textarea" rows="1" placeholder="Escribe un comentario..." title="Escribe un comentario..."></textarea>
</li>
</ul>
</div>
CSS:
.rows {
height: auto;
width: 494px;
background: rgb(246, 247, 248) none repeat scroll 0% 0% / auto padding-box border-box;
border-radius: 0 0 3px 3px;
margin: 8px -12px -12px;
}
#UL_101 {
width: 494px;
list-style: none outside none;
margin: 0px;
padding: 0px;
border-top: 1px solid rgb(225, 226, 227);
}
/* li */
.newComment_row {
height: auto;
position: relative;
width: 470px;
background: rgb(246, 247, 248) none repeat scroll 0% 0% / auto padding-box border-box;
border-radius: 0 0 2px 2px;
list-style: none outside none;
margin: 0px 12px;
padding: 4px 0px 8px 0px;
}
.textarea {
resize: none;
width: 416px;
font: normal normal normal 12px/15.3599996566772px Helvetica, Arial, 'lucida grande', tahoma, verdana, arial, sans-serif;
position: initial;
padding: 8px 3px 0 3px;
margin: 0 7px;
overflow: hidden;
}
和jquery:
// show rows
$('.comment_button').on('click', function () {
$('#hide_' + this.id).slideToggle('fast');
});
function h(e) {
$(e).css({
'height': 'auto',
'overflow-y': 'hidden'
}).height(e.scrollHeight);
}
$('textarea').each(function () {
h(this);
}).on('input', function () {
h(this);
});
显示:没有打破样式:http://jsfiddle.net/cb41hmpo/
显示: block 不会破坏它:http://jsfiddle.net/cb41hmpo/1/
似乎是自动高度功能的问题...有没有办法解决这个问题?
无论发生什么变化,我都希望尽可能保持文本区域的大小。
这没什么大不了的,但是如果显示设置为阻塞并且我单击按钮,textarea 占位符文本会出现一秒钟的模糊或模糊,这是正常现象还是可以修复?
最佳答案
如果我们检查你的代码
function h(e) {
alert(e.scrollHeight);
$(e).css({
'height': 'auto',
'overflow-y': 'hidden'
}).**height(e.scrollHeight)**;
}
如果您查看此处的粗体部分,您会将 scrollHeight 分配给 $e。如果我们做一个警告,我们可以看到当父 div 隐藏时 textarea 的高度是 0,当 div 显示时它是 23 px。现在在 (star marked -->height(e.scrollHeight) 文本中,我们明确地将高度分配给文本区域(粗体文本)。因此,它的尺寸较小。因此您的 height auto 是当您通过 e.scrollHeight 分配高度时,不会出现在画面中。
尝试从两个片段中删除粗体文本。您将获得相同的结果。
希望对您有所帮助。
快乐学习:)
关于javascript - div 显示无中断样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26963017/