如何根据用户点击来显示和隐藏下划线？

a:hover {
  text-decoration: underline;
}

<a href="#" id="myLink">点击我</a>

<script>
  var link = document.getElementById("myLink");
  var underlineVisible = false;

  link.addEventListener("click", function() {
    if (underlineVisible) {
      link.style.textDecoration = "none";
      underlineVisible = false;
    } else {
      link.style.textDecoration = "underline";
      underlineVisible = true;
    }
  });
</script>

<a href="#" id="myLink">点击我</a>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $("#myLink").click(function() {
    $(this).toggleClass("underline");
  });
</script>