跨度标记和嵌套跨度标记中的文本未显示答案

【问题标题】：Text in span tag and nested span tag not showing跨度标记和嵌套跨度标记中的文本未显示
【发布时间】：2020-06-03 08:46:24
【问题描述】：

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

我尝试在第一个和第二个 span 标签内添加一个测试图像，它会显示在屏幕上。但是两者中的文字都没有显示。它应该在checkbox-div 框中显示为“国家/地区 +”。当我将图像放入location-div 时，图像不显示。唯一出现的是类似按钮的“清除”重置元素。如这张图片： button-like element with "Clear" label inside checkbox-div bordered box，尽管它显示在运行代码 sn-p 中。

我还尝试在所有跨度标签中添加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 = '&minus;';
  }
}

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

一旦点击“国家+”的展开功能，应显示“国家-”下方的所有复选框。此功能适用于我测试的另一个页面，但我无法在我正在处理的页面上测试它，因为“国家 +”没有显示，尽管它在这段代码sn-p。

【问题讨论】：

nextSibling 可能不是你想象的那样。 developer.mozilla.org/en-US/docs/Web/API/Node/nextSibling#Notes
我把你的 HTML、CSS 和 JS 变成了runnable stack snippet 给你。
@Cbroe 我将其更改为 nextElementSibling 但它仍然没有在我的页面上显示“Countries +”。我编辑了我的代码以显示这一点。
显示/隐藏复选框现在似乎可以正常工作（在 Chrome 和 Firefox 中测试），那么现在有什么问题？
@CBroe，在代码 sn-p 是的，但我添加了一张我在我正在处理的实际页面上看到的图片，并且“Countries +”没有出现在“Clear " 框。

标签： html css

【解决方案1】：

nextSibling 返回任何下一个文本节点、注释节点或元素节点，这要感谢 Cbroe 在 cmets 中指出的。我将其更改为 nextElementSibling 以仅获取下一个元素。

还要感谢 Dionys 让我意识到这与隐藏扩展的一些 css 有关。我的body css原本是这样的：

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

当我删除 min-width: 1010px; 时，跨度中的文本现在出现了。

【讨论】：