javascript - “Read More” 描述默认不隐藏，只有点击按钮后才隐藏

Question

我有一个问题，我希望“阅读更多”按钮在用户单击它后显示描述，默认情况下描述应该隐藏，在用户单击“阅读更多”后它应该显示它。但遗憾的是，它默认显示描述，在我单击“阅读更多”和“阅读较少”按钮后，它隐藏了描述。

这是我的代码和我的 JSFiddle :

function myFunction1() {
  var dots1 = document.getElementById("dots1");
  var moreText1 = document.getElementById("more1");
  var btnText1 = document.getElementById("myBtn1");

  if (dots1.style.display === "none") {
    dots1.style.display = "inline";
    btnText1.innerHTML = "READ MORE";
    moreText1.style.display = "none";
  } else {
    dots1.style.display = "none";
    btnText1.innerHTML = "READ LESS";
    moreText1.style.display = "inline";
  }
}

<div class="card-body">
  <!--Title-->
  <h4 class="card-title">Johor Rugby Carnival Meets 96 teams at EduCity</h4>
  <!--Text-->
  <p class="card-text"> <span id="dots1"></span><span id="more1">erisque 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.</span></p>
  <button onclick="myFunction1()" id="myBtn1" class="btn btn2">READ MORE</button>
</div>

我希望描述默认隐藏，仅在用户单击“阅读更多”按钮后显示。

Answer 1

您只需将 more1 范围以及您希望应用到的任何其他范围的默认样式设置为 display:none

<span id="more1" style="display:none">

 function myFunction1() {
    var dots1 = document.getElementById("dots1");
    var moreText1 = document.getElementById("more1");
    var btnText1 = document.getElementById("myBtn1");

    if (dots1.style.display === "none") {
      dots1.style.display = "inline";
      btnText1.innerHTML = "READ MORE";
      moreText1.style.display = "none";
    } else {
      dots1.style.display = "none";
      btnText1.innerHTML = "READ LESS";
      moreText1.style.display = "inline";
    }
  }

<div class="card-body">
  <!--Title-->
  <h4 class="card-title">Johor Rugny Carnival Meets 96 teams at EduCity</h4>
  <!--Text-->
  <p class="card-text"> <span id="dots1"></span><span id="more1" style="display:none">erisque 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.</span></p>
  <button onclick="myFunction1()" id="myBtn1" class="btn btn2">READ MORE</button>
</div>