顯示/隱藏文本按鈕位置

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>