div顯示無間斷樣式

Question

我有一個用於評論的文本區域和一個用於顯示或隱藏它的按鈕（切換）。 如果我想在單擊按鈕以顯示它時默認將其隱藏（顯示：無），則樣式已損壞，但是如果未隱藏（顯示：塊），則可以無問題地單擊，該樣式會很好。

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/
顯示：塊不會破壞它： http ： //jsfiddle.net/cb41hmpo/1/

看來問題出在自動高度功能...有沒有辦法解決這個問題？

無論可能發生什么變化，我都希望保留該textarea的大小。

沒什么大不了的，但是如果將顯示設置為阻止，然后單擊按鈕，則textarea占位符文本會有些模糊或模糊一秒鍾，這是正常現象還是可以解決？

Answer 1

如果我們通過您的代碼

function h(e) {
  alert(e.scrollHeight);
  $(e).css({
    'height': 'auto',
    'overflow-y': 'hidden'
}).**height(e.scrollHeight)**;
}

如果您在此處查看粗體部分，則將scrollHeight分配給$ e。 如果我們發出警報，則可以看到隱藏父級div時textarea的高度為0，顯示div時為23 px。 現在，在（標記為-> height（e.scrollHeight）的星號中）中，我們將該高度明確分配給文本區域（粗體）。因此，它的尺寸較小。因此，您的身高自動值不會像通過e.scrollHeight分配高度。

嘗試從兩個代碼片段中刪除粗體文本。 您將得到的結果將是相同的。

希望這會有所幫助。

快樂學習:)