div顯示無中斷樣式

我有一個textarea的評論和一個按鈕來顯示或隱藏它（切換）。如果我想隱藏它默認情況下（顯示：無），當我點擊按鈕來顯示它時，風格被破壞，但如果它沒有隱藏（顯示：塊）我可以點擊沒有問題，風格會很好。div顯示無中斷樣式

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佔位符文本會出現一些模糊或模糊的一秒，是正常的事情還是可以修復？

來源

2014-11-16 Chazy Chaz

有誰不喜歡我的問題，可以，至少，留下評論解釋他/她不喜歡的動機... –

如果我們通過您的代碼

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

如果你看一下大膽節在這裏你都分配到scrollHeight屬性$即如果我們做了一個警報，我們可以看到，當父div被隱藏時，textarea的高度是0，當div顯示時是23px。現在在（星號標記 - >高度（e.scrollHeight）文本中，我們明確地將該高度分配給textarea（粗體文本）。因此，它的大小較小。因此，您的高度自動未作爲圖片顯示你被分配e.scrollHeight高度。

嘗試從兩個片段取出大膽的文字，你會得到的結果是一樣的。

希望這是一些幫助。

快樂學習:)

來源

2014-11-16 23:42:51 Vatsal

對！我懂了。但是，你的意思是什麼粗體文字？ –

對不起...編輯器沒有使它大膽:) 我在說的是高度（e.scrollHeight） – Vatsal

如果我刪除它，textarea不會自動調整高度:(我怎樣才能在該函數中指定初始值高度?? –

div顯示無中斷樣式

回答

相關問題