Question

基本上我有这个JS脚本，当单击它时，它会显示更多文本。问题是，当所有文本都存在时，它所在的div保持与它一样大。我希望它只是div的大小与文本的预览一样大，然后当你点击+按钮时，div扩展到与所有文本一样大。

以下是未展开时的情况：http://puu.sh/FZj6 当它被扩展时：http://puu.sh/FZjD

如您所见，div大小始终保持不变。

JS

function hx(elmnt){document.getElementById(elmnt).style.visibility="hidden";}
function sx(elmnt){document.getElementById(elmnt).style.visibility="visible";}

HTML 的

       This is the text that is automatically there. When you click the + to the left, the rest of the text appears. (<a onClick="sx('more')" style="cursor:pointer;" title="Show more">+</a>)

       <div id="more" style="visibility:hidden;">
   <p>(<a onClick="hx('more')" style="cursor:pointer;" title="Show less">-</a>)<br /><br>
       This is the text that appears when the + is clicked. The - above removes this text. When the minus is clicked, the div should restore to original size.

任何帮助将不胜感激！感谢。

Answer 1

使用display代替visibility也可以删除空格;

function hx(elmnt){document.getElementById(elmnt).style.display = "none";}
function sx(elmnt){document.getElementById(elmnt).style.display = "block";}

Answer 2

如果您使用固定的height:auto，则为显示内容的主div制作height。

当使用此JS脚本时，Div保持相同的大小

2 个答案: