在过去的一周中，我一直在Dixwell Dossier（我的NaNoWriMo项目的语义Wiki）上开发一个新的Tumblr小部件。部分原因是基于这个JSFiddle实验，该实验是在另一个Stack Overflow问题中提出的。
当前代码：
<script type="text/javascript">
function growDiv() {
var growDiv = document.getElementById('grow');
if (growDiv.clientHeight) {
growDiv.style.height = 0;
} else {
var wrapper = document.querySelector('.measuringWrapper');
growDiv.style.height = wrapper.clientHeight + "px";
}
document.getElementById("more-button").value=document.getElementById("more-button").value=='More'?'Less':'More';
}
</script>
<style type="text/css">
.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}
div iframe {width: 100%}
#more-button{border-style:none;background:none;font-size:16px;font-family:Merriweather;font-weight:bold;color:blue;margin: 0 0 10px 0;}
#grow input:checked{color:red;}
#more-button:hover{color:black;}
#grow {
-moz-transition: height 1.5s;
-ms-transition: height 1.5s;
-o-transition: height 1.5s;
-webkit-transition: height 1.5s;
transition: height 1.5s;
height: 800px;
overflow: hidden;
}
</style>
<div style="font-size: 125%; font-family: Verdana; border-radius: 5px; background-color: <!--{$bgcol|escape:'html'|default:'#780099'}-->; color: <!--{$textcol|escape:'html'|default:'white'}-->; margin-bottom: 8px; padding: 0.8em">The latest posts from <b><!--{$site|escape:'quotes'|default:'yahoo'}--></b> on Tumblr</div>
<div id='grow'>
<div class='measuringWrapper'>
<div class="three-col">
<script type="text/javascript" src="http://<!--{$site|escape:'quotes'|default:'yahoo'}-->.tumblr.com/js?num=15"></script>
</div>
</div>
</div>
<input type="button" onclick="growDiv()" value="⬇ More" id="more-button">
<div style="font-family: Verdana; border-radius: 5px; background-color: #6aa5cf; color: white; padding: 0.5em"><span class="plainlinks"><b>Never miss a post!</b> <a href="https://www.tumblr.com/register/follow/<!--{$site|escape:'html'|default:'yahoo'}-->"> Follow <b><!--{$site|escape:'quotes'|default:'yahoo'}--></b> now</a> • <a href="https://www.tumblr.com/">Sign in</a></span><span style="float: right">Powered by <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Tumblrfull.svg/50px-Tumblrfull.svg.png" alt="Tumblr logo"/></span></div>
除了一件小事情，所有事情都将按计划进行：第一次单击“更多”时，文本区域缩小并隐藏帖子。只有在下次点击时，我才能看到所有帖子；第三次单击，它将所有内容隐藏起来。相反，他们应该向下浏览并显示其余内容，并在下次单击时返回到原始的800px高度。
基本上，我想要的是：
↓更多（800px）→更少（100％）→更多（800px），
不
↓更多（800px）→更多（0）→更少（100％）。
就目前而言，我将继续进行进一步的编辑，直到在此处找到解决方案为止。修复，有人吗？
（PS：如果您想在档案室的沙箱中对此进行测试，则必须等待一段时间：在撰写本文时，Referata的服务器处于减速模式。编辑时使用的代码：
{{#widget：tumblr}}）
好吧，这就是您对其进行编程的方式。在代码顶部，您有：
if (growDiv.clientHeight) {
growDiv.style.height = 0;
} else {
var wrapper = document.querySelector('.measuringWrapper');
growDiv.style.height = wrapper.clientHeight + "px";
}
在该if语句中，您正在检查growDiv.clientHeight。如果非零（因此为true），则将元素的高度设置为零，否则将其设置为等于.measuringWrapperdiv的高度。
现在，您可以简单地将条件替换为if (growDiv.clientHeight > 800)，然后将高度设置为，"800px"而不是0如果条件为true。但是，如果测量包装的高度小于800 px，这将以滑稽的方式表现出来，因此您可能要先检查该包装并将其作为特殊情况处理（也许完全禁用并隐藏按钮）。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句