获取子元素并修改文本

Question

当使用 JavaScript 单击按钮时，我需要将 span 元素中的文本从 [+] 切换到 [-]。如何使用当前的切换功能实现此目的？

HTML

...
<ul>
  ...
  <li>
    <ul>
      <h3>header</h3>
      <a href="#">url-link</a>
      <p>description</p>
    <ul>
    <div class="department" style="display: none;">
      <ul class="placemark"> ... </ul>
      <ul class="contact"> ... </ul>
    </div>
    <button class="department-collapse" onclick="toggle(this)">
      <span>[+]</span> Contact Information
    </button>
  </li>
  ...
<ul>
...

JavaScript

function toggle(self) {
  var n = self.parentNode.childNodes;
  
  for(var i = 0; i < n.length; i++) {
    if (n[i].className == 'department') {
      n[i].style.display = n[i].style.display == '' ? 'none' : '';
    }
  }
}

Answer 1

在你的函数中，验证你的 span（JS 代码）：

function toggle(self) {
    var n = self.parentNode.childNodes;

    for(var i = 0; i < n.length; i++) {
        if (n[i].className == 'department') {
            n[i].style.display = n[i].style.display == '' ? 'none' : '';
        }
    }

    var mySpan = self.childNodes[0];
    mySpan.innerHTML = mySpan.innerHTML == '[+]' ? '[-]' : '[+]';
}