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>

所以，我希望＆＃34; less＆＃34;按钮出现在扩展文本的末尾，而不是与＆＃34;更多＆＃34;相同的位置。按钮。那可能吗？感谢。

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>

显示/隐藏文本按钮位置

1 个答案: