Question

我正在尝试使用javascript创建一个多读/少读切换，并且我对自己做错了。该代码似乎带有省略号，但是当我单击“阅读更多”时，数据似乎一直设置为显示：无

我创建了一个well的Codepen

function myFunction() {
  let text = document.getElementById('overflow_text')
  let toggle = document.getElementById('toggle_text')
  console.log(text)
  console.log(toggle)
  if (text.style.display === 'none') {
    toggle.innerHTML = 'Read More'
    text.style.display = 'block'
    text.style.overflow = 'hidden'
    text.style.textOverflow = 'ellipsis'
    text.style.whiteSpace = 'nowrap'
  } else {
    toggle.innerHTML = 'Read Less'
    text.style.display = 'none'
    text.style.overflow = 'visible'
    text.style.textOverflow = 'string'
    text.style.whitespace = 'normal'
  }
}

.myClass {
  height: 150px;
}

#overflow_text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#toggle_text {
  cursor: pointer;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 myClass">
      <p id='overflow_text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
        vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
        Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
        eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
        fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
      <span onClick="myFunction()" id="toggle_text">Read More</span>
    </div>
  </div>
</div>

如果有人能指出我做错了什么，那将对我有很大帮助。

Answer 1

为什么不起作用？

因为您要将段落（#overflow_text）设置为display: none ...因此您不应该将display属性用作此处的条件...因为您的整个段落都会消失，这不是你想要的。

解决方案：

相反，您可以使用overflow属性作为条件（也可以使用display以外的其他属性），这将起作用：

function myFunction() {
  let text = document.getElementById('overflow_text')
  let toggle = document.getElementById('toggle_text')

  if (text.style.overflow == 'visible') {
    toggle.innerHTML = 'Read More'
    text.style.overflow = 'hidden'
    text.style.textOverflow = 'ellipsis'
    text.style.whiteSpace = 'nowrap'
  } else {
    toggle.innerHTML = 'Read Less'
    text.style.overflow = 'visible'
    text.style.textOverflow = 'string'
    text.style.whiteSpace = 'normal'
  }
}

.myClass {
  height: 150px;
  width : 500px;
}

#overflow_text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#toggle_text {
  cursor: pointer;
}

<div class="container">
  <div class="row">
    <div class="col-md-6 myClass">
      <p id='overflow_text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
        vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
        Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
        eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
        fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
      <span onClick="myFunction()" id="toggle_text">Read More</span>
    </div>
  </div>
</div>

Answer 2

为什么要重新发明轮子？使用详细信息吗？

<article>

  <p class="short-text">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imper...
  </p>
  <details>
    <summary>Read more</summary>
    <p>
       Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.
    </p>
  </details>

</article>

Answer 3

我已修改您的供稿： js现在切换类active

var el = document.querySelector('.toggle_text');
var content = document.querySelector('.overflow_text');

el.onclick = function() {
  content.classList.toggle('show');
  if (content.classList.contains('show')) {
    el.textContent = 'Read Less'
  } else {
    el.textContent = 'Read More'
  }
}

.myClass {
  height: 150px;
}

.overflow_text {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.show {
  text-overflow: string;
  overflow: visible;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<div class="container">
  <div class="row">
    <div class="col-md-6 myClass">
      <p class='overflow_text'>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus
        vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum.
        Sed dapibus pulvinar nibh tempor porta.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue
        eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer
        fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
      <span class="toggle_text">Read More</span>
    </div>
  </div>
</div>

Answer 4

使用.onclick（）。关于如何使用此选择器，有很多可用信息。在搜索参数中使用.onclick（）作为关键字，尝试使用YouTube或其他stackoverflow线程。

要切换为使用Java阅读更多/更少吗？

4 个答案: