我怎样才能工作我的 JavaScript 阅读更多工作

Question

我找到了一些用于阅读更多/更少文本的脚本。 该脚本在我的笔记本电脑上运行良好，但是当我将它上传到服务器时它不起作用。 您可以在这里查看： www.engliScare.net在课程提供部分。 它只是在那里显示“阅读更多”，但也显示隐藏的文本。 我想知道为什么，因为它在我的笔记本电脑上运行良好。 这是代码：

js/hide.js

function evtEllipse(info) {
  info.nextElementSibling.classList.toggle('hide');
  info.classList.toggle('hide');
}
function spanEllipse(info) {
  info.classList.toggle('hide');
  info.previousElementSibling.classList.toggle('hide')
}

这就是它的外观：

<p>
  are held between the teacher and the student. All attention is given to the only student and the teacher gets to know the
  <span class="read_button" onclick="evtEllipse(this)">&hellip; read more</span>
  <span class="hide" onclick="spanEllipse(this)">
      student abilities 
  and disabilities and also his weaknesses and strengths in English. 
  </span>
</p>

当然我添加了这样的脚本：

    <script src="js/hide.js"></script>

这是 CSS：

    .hide {
  display: none;
}
.read_button {
  font-size: 1rem;
  font-weight: bold;
  color: #F56692;
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none; 
  padding: 2px 2px 2px 2px;
  color: var(--color-secondary);
  cursor: pointer;
}
.read_button:hover{
  color: #2a2e35;
  font-size: 1.1rem;
  color: var(--color-grey-1);
  cursor: pointer;

}

作为一个片段：

 function evtEllipse(info) { info.nextElementSibling.classList.toggle('hide'); info.classList.toggle('hide'); } function spanEllipse(info) { info.classList.toggle('hide'); info.previousElementSibling.classList.toggle('hide') }

 .hide { display: none; }.read_button { font-size: 1rem; font-weight: bold; color: #F56692; background-color: Transparent; background-repeat: no-repeat; border: none; padding: 2px 2px 2px 2px; color: var(--color-secondary); cursor: pointer; }.read_button:hover { color: #2a2e35; font-size: 1.1rem; color: var(--color-grey-1); cursor: pointer; }

 <p> are held between the teacher and the student. All attention is given to the only student and the teacher gets to know the <span class="read_button" onclick="evtEllipse(this)">&hellip; read more</span> <span class="hide" onclick="spanEllipse(this)"> student abilities and disabilities and also his weaknesses and strengths in English. </span> </p>

Answer 1

哎哟..我现在看到了..你们太棒了..不知道为什么，但我的笔记本电脑不允许我将 hide.js 上传到 FTP。 总是显示错误。 之前没看到，不知道没有上传到那里。，我认为提供者有问题。 反正。 感谢您的超快速回复和您的时间。 我欠你。

编辑。 我在那里添加了脚本，但它仍然不起作用。 现在它和我的笔记本电脑完全一样。 但还是不行。 如何与您分享错误代码？ 它没有向我显示任何内容。

Answer 2

你也可以用那个...

 document.querySelectorAll('span.MoreLess').forEach( sp => sp.onclick =_=> sp.classList.toggle('less') )

 span.MoreLess { cursor: zoom-out; } span.MoreLess.less { font-size: 0; /* hide span content */ cursor: zoom-in; } span.MoreLess.less::after { font-size: 1rem; content: '\2026 read more'; font-weight: bold; } span.MoreLess.less:hover::after { font-size: 1.1rem; }

 <p> are held between the teacher and the student. All attention is given to the only student and the teacher gets to know the <span class="MoreLess less" > student abilities and disabilities and also his weaknesses and strengths in English. </span> </p>