Question

大家好，我有问题。如何淡入（和淡出）按下“显示更多”按钮时出现的文本。我已经搜索过并从w3school找到了这段代码，我试着用我自己的代码实现它，但我需要任何建议吗？

找到一段代码：

<!DOCTYPE html>
<html>

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $(".btn1").click(function() {
        $("p").fadeOut()
      });
      $(".btn2").click(function() {
        $("p").fadeIn();
      });
    });
  </script>
</head>

<body>

  <p>This is a paragraph.</p>

  <button class="btn1">Fade out</button>
  <button class="btn2">Fade in</button>

</body>

</html>

var status = "less";

function toggleTextPersonal() {
  if (status == "less") {
    document.getElementById("showMorePersonal").style.display = "block";
    document.getElementById("toggleButtonPersonal").innerHTML = "Show Less <i class='fas fa-caret-up'></i>";
    status = "more";
  } else if (status == "more") {
    document.getElementById("showMorePersonal").style.display = "none";
    document.getElementById("toggleButtonPersonal").innerHTML = "Show More <i class='fas fa-caret-down'></i>";
    status = "less"
  }
}

<!DOCTYPE html>
<html>

<head>
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>

<body>

  <div id="showMorePersonal" style="display: none;">
    test
  </div>

  <button type="button" id="toggleButtonPersonal" onclick="toggleTextPersonal();" href="javascript:void(0);">Show More <i class="fas fa-caret-down"></i></button>

  <div id="textArea" style="display: none;">

  </div>
</body>

</html>

Answer 1

这是执行此操作的jQuery方法。请阅读评论：

var showMorePersonal = $('#showMorePersonal');
var toggleButtonPersonal = $('#toggleButtonPersonal');

toggleButtonPersonal.on('click', function() {
  // check if `showMorePersonal` div is visible. If so, fadeOut it and replace the text
  if (showMorePersonal.is(':visible')) {
    toggleButtonPersonal.html('Show More <i class="fas fa-caret-down"></i>');
    showMorePersonal.fadeOut();
  } else {
    toggleButtonPersonal.html('Show Less <i class="fas fa-caret-up"></i>');
    showMorePersonal.fadeIn();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<div id="showMorePersonal" style="display: none;">
  test
</div>

<button type="button" id="toggleButtonPersonal">Show More <i class="fas fa-caret-down"></i></button>

了解更多关于：

如果不清楚，请告诉我。

Answer 2

您应该导入jQuery文件并使用代码段中提到的$("#showMorePersonal").fadeIn();和$("#showMorePersonal").fadeOut();。

var status = "less";

function toggleTextPersonal()


{
    
    if (status == "less") {
        $("#showMorePersonal").fadeIn();
      document.getElementById("toggleButtonPersonal").innerHTML = "Show Less <i class='fas fa-caret-up'></i>";
        status = "more";
    } else if (status == "more") {
         $("#showMorePersonal").fadeOut();
       document.getElementById("toggleButtonPersonal").innerHTML = "Show More <i class='fas fa-caret-down'></i>";

        status = "less"
    }
	
}

<script src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>
<body>

<div id="showMorePersonal" style="display: none;">
    test
</div>

<button type="button" id="toggleButtonPersonal" onclick="toggleTextPersonal();" href="javascript:void(0);">Show More <i class="fas fa-caret-down"></i></button>

<div id="textArea" style="display: none;"> 

</div>
</body>

</html>

淡入/淡出“显示更多”按钮文本

2 个答案: