跨度標記和嵌套跨度標記中的文本未顯示

Question

我之前問過一個類似的問題，但我做了更多的研究，發現了更具體的問題。 我想在 span 標簽內顯示文本，以便其中的 div 元素（每個都有一個復選框）顯示在屏幕上。

我嘗試在第一個和第二個 span 標簽內添加一個測試圖像，它顯示在屏幕上。 但是兩者中的文字都沒有顯示。 它應該在checkbox-div框中顯示為“Countries + ”。 當我將圖像放入location-div時，圖像不會顯示。 唯一出現的是類似按鈕的“清除”重置元素。 如下圖所示：帶有“Clear”label 的按鈕狀元素位於 checkbox-div 邊框框內，盡管它顯示在正在運行的代碼片段中。

我還嘗試在所有跨度標簽中添加style='display:block' 。 然后我嘗試僅在內部跨度標簽內添加它作為對建議問題的回答，但它也不起作用。

 function expand(element) { var list = element.nextElementSibling; var symbol = element.firstElementChild; if (list.style.display == 'block') { list.style.display = 'none'; symbol.innerHTML = '+'; } else { list.style.display = 'block'; symbol.innerHTML = '−'; } }

 #checkbox-div { max-height: 500px; overflow-y: auto; overflow-x: hidden; width: 200px; border: 1px solid #cccccc; padding: 2px; float: left; }.location-div { margin-left: 10px; display: none; } label { position: relative; margin-left: -20px; padding-right: 20px; left: 20px; }.expand { display: block; cursor: pointer; }.expand-symbol { font-weight: bold; }

 <div id='checkbox-div'> <form id='location-form' action="javascript:void(0);"> <span class='expand' onclick='expand(this)'>Countries <span class='expand-symbol'>+</span> </span> <.-- begin long line --> <div class='location-div'> <input type='checkbox' id='Albania' class='location-checkbox'><label for='Albania'>Albania</label> <br> <input type='checkbox' id='Algeria' class='location-checkbox'><label for='Algeria'>Algeria</label> <br> <!-- Etc. other countries --> <br> <input type='checkbox' id='Zimbabwe' class='location-checkbox'><label for='Zimbabwe'>Zimbabwe</label> <br> </div><input type='reset' value='Clear'> <!-- end long line --> </form> </div>

有很長的行帶有換行符，因為它是在 for 循環中創建的，並且在循環前后在 php 中帶有回聲，我添加了段落空格，以便於閱讀。

單擊“Countries + ”后展開的 function 應顯示“Countries - ”下方的所有復選框。 這個 function 可以在我測試的另一個頁面上工作，但是我還不能在我正在處理的頁面上測試它，因為“Countries + ”沒有顯示，盡管它在這個代碼片段中工作。

Answer 1

nextSibling 返回任何下一個文本節點、評論節點或元素節點，感謝 Cbroe 在評論中指出了這一點。 我將其更改為 nextElementSibling 以僅獲取下一個元素。

還要感謝 Dionys 讓我意識到這與一些隱藏擴展的 css 有關。 我的身體css原本是這樣的：

body{
    min-width: 1010px;
    font-size: 0px;
    font-family: Arial, Sans-Serif;
    margin-left: 6px;
}

當我刪除min-width: 1010px; 跨度中的文本現在出現了。