第二次单击时 Javascript-html 元素卡住

Question

我有一个无序列表，我有它，所以当我单击图像时它会弹出(以及相应的图像定位)但是当我再次单击图像时，它不会回到 OG 位置，即使我在我的 js 文件中有 element.style.right。当我第一次点击它时，js 工作，当我第二次点击图像时，div 会返回......只是不是图像本身
我的 HTML

function leftboxShow() {
  var a = document.getElementById("list-box");
  var b = document.getElementById("Show")
  if (a.style.display === "none") {
    a.style.display = "block"
    a.style.left = "0px"
    b.style.left = "260px"
  } else {
    a.style.display = "none"
    a.style.right = "0px"
    b.style.right = "260px"
  }

}

#list-box {
  background-image: linear-gradient(red, darkred);
  width: 265px;
  height: 1048px;
  position: relative;
  top: 40px;
  right: 265px;
  display: none;
}

ul#category-list li {
  font-size: 24px;
  padding: 1px 10px 5px 25px;
  color: blue;
  border-top: 3px dashed grey;
  list-style: none;
}

ul#category-list li:hover {
  opacity: 0.92;
  -webkit-transition: all 0.3s ease-in-out;
  background-color: pink;
}

ul#category-list {
  border-bottom: 3px dashed grey;
  border-right: 3px dashed grey;
  ;
}

#Show {
  width: 25px;
  height: 25px;
  position: relative;
  top: 55px;
  left: 0px;
  right: 0px;
  z-index: 2;
}

<img src="../../Images/Main/main/show ff.png" id="Show" onclick="leftboxShow()" />
<div id="list-box">
  <ul id="category-list">
    <li>Anime</li>
    <li>Animation</li>
    <li>Art</li>
    <li>Business</li>
    <li>Cooking</li>
    <li>DIY</li>
    <li>Decor</li>
    <li>Education</li>
    <li>Entertainment</li>
    <li>Erotica</li>
    <li>Fashion</li>
    <li>Finance</li>
    <li>Fitness</li>
    <li>Gaming</li>
    <li>Gardening</li>
    <li>Health</li>
    <li>Literature</li>
    <li>Music</li>
    <li>Modeling</li>
    <li>News</li>
    <li>Politics</li>
    <li>Podcasts</li>
    <li>Science</li>
    <li>Spiritality</li>
    <li>Technology</li>
    <li>Travel</li>
    <li>Vlogs</li>
    <li>Wildlife</li>
  </ul>
</div>

Answer 1

当您最初为您的 img 设计样式时, 你有 left设置为 0px，在你的 javascript 函数中设置 right属性为 260px，而不是这样做，重置 left样式为 0px，请参阅工作片段

    function leftboxShow() {
      var a = document.getElementById("list-box");
      var b = document.getElementById("Show")
      if (a.style.display === "none") {
        a.style.display = "block"
        a.style.left = "0px"
        b.style.left = "260px"
      } else {
        a.style.display = "none"
        a.style.right = "0px"
        b.style.left= "0px"
      }

    }


 

   #list-box {
      background-image: linear-gradient(red, darkred);
      width: 265px;
      height: 1048px;
      position: relative;
      top: 40px;
      right: 265px;
      display: none;
    }

    ul#category-list li {
      font-size: 24px;
      padding: 1px 10px 5px 25px;
      color: blue;
      border-top: 3px dashed grey;
      list-style: none;
    }

    ul#category-list li:hover {
      opacity: 0.92;
      -webkit-transition: all 0.3s ease-in-out;
      background-color: pink;
    }

    ul#category-list {
      border-bottom: 3px dashed grey;
      border-right: 3px dashed grey;
      ;
    }

    #Show {
      width: 25px;
      height: 25px;
      position: relative;
      top: 55px;
      left: 0px;
      right: 0px;
      z-index: 2;
    }

 <img src="../../Images/Main/main/show ff.png" id="Show" onclick="leftboxShow()" />
    <div id="list-box">
      <ul id="category-list">
        <li>Anime</li>
        <li>Animation</li>
        <li>Art</li>
        <li>Business</li>
        <li>Cooking</li>
        <li>DIY</li>
        <li>Decor</li>
        <li>Education</li>
        <li>Entertainment</li>
        <li>Erotica</li>
        <li>Fashion</li>
        <li>Finance</li>
        <li>Fitness</li>
        <li>Gaming</li>
        <li>Gardening</li>
        <li>Health</li>
        <li>Literature</li>
        <li>Music</li>
        <li>Modeling</li>
        <li>News</li>
        <li>Politics</li>
        <li>Podcasts</li>
        <li>Science</li>
        <li>Spiritality</li>
        <li>Technology</li>
        <li>Travel</li>
        <li>Vlogs</li>
        <li>Wildlife</li>
      </ul>
    </div>