如何在输入处于活动状态时显示和隐藏div

<input type="text" id="input" onfocus="showDiv()" onblur="hideDiv()">
<div id="myDiv" style="display: none;">这是要显示和隐藏的div</div>

<script>
function showDiv() {
  document.getElementById("myDiv").style.display = "block";
}

function hideDiv() {
  document.getElementById("myDiv").style.display = "none";
}
</script>

<style>
input:focus + div {
  display: block;
}

div {
  display: none;
}
</style>

<input type="text">
<div>这是要显示和隐藏的div</div>

<input type="text" id="input">
<div id="myDiv" style="display: none;">这是要显示和隐藏的div</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#input").focus(function() {
    $("#myDiv").show();
  });

  $("#input").blur(function() {
    $("#myDiv").hide();
  });
});
</script>