javascript - 如何更改另一个跨度内的跨度文本？

Question

我正在尝试制作一个可折叠列表，它根据列表是折叠还是展开从“+”变为“-”并返回。我可以使用以下语句获取文本:

$(this).children().eq(i).children('span')[0].firstChild.outerText;

但我不知道如何更改该值。 JQuery Guru 可以向我展示一个更优雅的解决方案。这是我的 JSFiddle .

This answer是我能找到的最接近我的问题的答案，但我不知道如何实现它，即使有更好的方法。

Answer 1

这可以简化很多。与其尝试匹配索引，不如使用 jQuery 的 find()定位后代的方法:

$('#test > li').click(function() {
  var $symbol = $(this).find('.symbol');
  $(this).find('ul').slideToggle('fast');
  if ($symbol.text() === ' +') {
    $symbol.text(' -');
  } else {
    $symbol.text(' +');
  }
});

.hideUnorderedList {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <ul id="test">
    <li id="first">
      <span class="Collapsable"><span class="symbol"> +</span>First One</span>
      <ul id="myfirstlist" class="hideUnorderedList">
        <li>Something to do</li>
        <li>Something else to do</li>
      </ul>
    </li>
    <li id="second">
      <span class="Collapsable"><span class="symbol"> +</span>Second One</span>
      <ul id="mysecondlist" class="hideUnorderedList">
        <li>Second thing to do</li>
        <li>Second other thing to do</li>
      </ul>
    </li>
  </ul>
</div>