顯示/隱藏文本按鈕位置

我有這樣的代碼：顯示/隱藏文本按鈕位置

<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>

所以，我想「少」按鈕出現在展開的文字的末尾，而不是在相同的位置，「多」按鈕。那可能嗎？謝謝。

來源

2014-11-04 user2421425

嘗試把少按鈕上顯示設置爲none span標記充分展開文本的末尾。設置onclick more並將顯示更改爲內聯塊。 – FortMauris 2014-11-04 16:06:27

對不起FortMauris，我不太瞭解你的解決方案的第二部分。謝謝。 – user2421425 2014-11-04 16:15:27

你需要切換這兩個線路，如：

<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>

來源

2014-11-04 16:35:23 Elbaninaoufal

哇！有時在最簡單的方法是在我們的鼻子前面尋找更復雜的解決方案。非常感謝！！ – user2421425 2014-11-04 16:49:33

顯示/隱藏文本按鈕位置

回答

相關問題