如何在使用JS的html上单击列表时显示隐藏图像？

<ul>
  <li id="item1">列表项1</li>
  <li id="item2">列表项2</li>
  <li id="item3">列表项3</li>
</ul>

var item1 = document.getElementById("item1");
var item2 = document.getElementById("item2");
var item3 = document.getElementById("item3");

item1.addEventListener("click", toggleImage);
item2.addEventListener("click", toggleImage);
item3.addEventListener("click", toggleImage);

function toggleImage() {
  var image = this.querySelector("img");
  
  if (image.style.display === "none") {
    image.style.display = "block";  // 图像隐藏时显示图像
  } else {
    image.style.display = "none";   // 图像显示时隐藏图像
  }
}

<ul>
  <li id="item1">列表项1<img src="image1.jpg" style="display: none;"></li>
  <li id="item2">列表项2<img src="image2.jpg" style="display: none;"></li>
  <li id="item3">列表项3<img src="image3.jpg" style="display: none;"></li>
</ul>