javascript - MW 小部件上的内容应在第一次单击时展开，但会缩小

Question

过去一周，我一直在研究一个新的 Tumblr widget在 Dixwell Dossier 上，这是我的 NaNoWriMo 项目的语义 wiki。部分基于this JSFiddle experiment在另一个 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="&#11015; 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%)。

就目前情况而言，我将保留进一步的编辑，直到我能在这里找到解决方案。有人修复吗？

(P.S.如果您想在 Dossier 的沙箱中测试这一点，您可能需要等待一段时间:在撰写本文时，Referata 的服务器处于减速模式。编辑时使用的代码:

{{#widget:tumblr}})

Answer 1

嗯，这就是您对其进行编程的方式。在代码的顶部，您有:

if (growDiv.clientHeight) {
  growDiv.style.height = 0;
} else {
  var wrapper = document.querySelector('.measuringWrapper');
  growDiv.style.height = wrapper.clientHeight + "px";
}

在 if 语句中，您正在检查 growDiv.clientHeight。如果它非零(因此为 true)，则将元素的高度设置为零，否则将其设置为等于 .measuringWrapper div 的高度。

现在，您只需将条件替换为 if (growDiv.clientHeight > 800)，并将高度设置为 "800px" 而不是 0 如果条件为真。但是，如果测量包装器的高度小于 800 px，这会以有趣的方式表现，因此您可能需要首先检查并将其视为特殊情况(也许完全禁用并隐藏按钮)。