javascript展开/折叠文字-默认折叠 [英] javascript expand/collapse text - collapse on default

问题描述

我对javascript缺乏经验，但是设法(在google的帮助下)整理了以下可扩展/可折叠链接

I'm very inexperienced in javascript but have managed (with the help of google) to put together the following expandable/collapsible link

<script type="text/javascript">
function toggleMe(a) {
   var e = document.getElementById(a);
   if(!e) return true;

   if(e.style.display == "none") {
      e.style.display = "block"
   }
   else {
      e.style.display = "none"
   }
   return true;
}
</script>
<p>
  <input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
</p>
<p id="para1">
   <strong><em>text text text text</em></strong>
</p>

唯一的问题是默认情况下它是扩展的，而我希望它默认情况下是折叠的.有人能帮忙吗?谢谢！ 另外，如果有人知道如何根据链接是展开还是折叠而在链接旁边获取+/-符号，那就太好了.

The only problem with it is that it is expanded by default and I wanted it collapsed by default. Can anyone help with this? Thank you! Also, if anyone knows how to get +/- signs next to the link that change depending on whether it is expanded or collapsed, that would be great.

推荐答案

<script type="text/javascript">
function toggleMe(a) {
   var e = document.getElementById(a);
   var toggleIcon = document.getElementById('toggle-icon');
   if(!e) return true;

   if(e.style.display == "none") {
      e.style.display = "block";
      toggleIcon.innerHTML = '-';
   }
   else {
      e.style.display = "none";
      toggleIcon.innerHTML = '+';
   }
   return true;
}
</script>
<p>
  <input onclick="return toggleMe('para1')" style="font-size:18px; color:#008080;" type="text" value="LINK TO EXPAND" />
  <span id="toggle-icon">+</span>
</p>
<p id="para1" style="display: none;">
   <strong><em>text text text text</em></strong>
</p>

这篇关于javascript展开/折叠文字-默认折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！