span标签和嵌套span标签中的文本未显示

Question

我以前问过类似的问题，但是我进行了更多研究，发现了更具体的问题。我想在span标签内显示文本，以便其中的div元素（每个元素都有一个复选框）显示在屏幕上。

我尝试在第一个span标签和第二个span标签中添加测试图像，并且该图像显示在屏幕上。但两者中的文字均未显示。它应该在checkbox-div框中显示为“国家+”。当我将图像放入location-div时，图像不会显示。唯一显示的是按钮式的“清除”重置元素。如图所示：button-like element with "Clear" label inside checkbox-div bordered box，尽管它显示在正在运行的代码片段中。

我还尝试在所有span标签内添加style='display:block'。然后，我尝试仅在内部span标签内添加该标签，以回答所建议的问题，但这也不起作用。

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中创建了echo，我添加了段落空格，以便于阅读。

单击“国家+”后的扩展功能，应显示“国家-”下面的所有复选框。此功能可在我测试过的另一页上运行，但是我无法在正在处理的页面上对其进行测试，因为“ 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;时，将显示跨度中的文本。