javascript - 添加一个 "close"按钮到展开-折叠段落

Question

我目前在我的网页上添加了一个可折叠的段落功能。我使用了在 http://www.javascriptsource.com/miscellaneous/expand-collapse-paragraph.html#comment_listing 上找到的代码.基本上，我有一个很长的段落，在单击按钮之前是隐藏的，但是您必须一直滚动回到顶部才能单击同一个按钮来折叠该段落。我想知道是否有一种方法可以在段落末尾添加一个“关闭”按钮，这样我就不必滚动到顶部。

谢谢。

这里是js、css和html文件的代码:

CSS

input.button {
  color: #fff; background: #0034D0;
  font-size: .8em;
  font-weight:bold;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  border: solid 1px #ffcf31;
}

名为:expandCollapse.js 的外部 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;
}

实际段落之前的 HTML 文档的 BODY 部分

<center><input type="button" class="button" onClick="return toggleMe('para1')" value="Animation Characters Guide"></center>
    <div id="para1" style="display:none">

    </div>

如果我想添加一个“关闭”按钮，它会是一个“a href”标签吗？

Answer 1

If I want to add a "close" button, would it be a "a href" tag?

是的，您可以使用链接:

<a href="#" onclick="toggleMe('para1'); return false"> hide </a>

或者您可以使用另一个按钮:

<input type="button" class="button" onclick="return toggleMe('para1')" value="Are the JavaScripts here free?" />