显示/隐藏文本按钮位置

Question

我有这样的代码：

<style type="text/css">
.toggleLink {
    color: #000;
    text-decoration: none;
}
.toggleLink:hover {
    cursor: pointer;
}
.elaboration {
    display: none;
}
</style>

<p>Lorem ipsum dolor sit amet, mel id dolore labore prompta... 
<span class="toggleLink" onclick="toggleDisplay('elaboration_1',this)">
<span>more</span></span> <span class="elaboration" id="elaboration_1">Delicata definiebas ut mei, molestiae scriptorem eu eam. Clita equidem te mei, vis vidisse persequeris at.
</span>
</p>

<script>
function toggleDisplay(id,a)
  {
  var elaboration = document.getElementById(id);
  if (elaboration.style.display == "block")
  {
  elaboration.style.display = "none";
  if(a) a.innerHTML="<span>more</span>"; // won't work with target=_self
  }
  else
  {
  elaboration.style.display = "block";
  if(a) a.innerHTML = "<span>less</span>";
  }
}
</script>

因此，我希望“更少”按钮出现在扩展文本的末尾，而不是在与“多”按钮相同的位置。这有可能吗？谢谢。

Answer 1

您需要将这两行切换如下：

<span class="elaboration" id="elaboration_1">
  Delicata definiebas ut mei, molestiae scriptorem eu eam. Clita equidem te mei, vis vidisse persequeris at.
</span>
<span class="toggleLink" onclick="toggleDisplay('elaboration_1',this)">
  <span>more</span>
</span>