我怎樣才能工作我的 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>