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，请查看工作 sn-p

    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>

Answer 2

将您的 b.style.right = "260px" 更改为 b.style.left = "0px"。这就是你如何将它恢复到原来的位置。

我还更改了您的条件，以便您的第一次点击会打开您的菜单。请参阅this 了解更多信息。

function leftboxShow() {
  var a = document.getElementById("list-box");
  var b = document.getElementById("Show")
  if (a.style.display == "block") {
    a.style.display = "none"
    a.style.right = "0px"
    b.style.left = "0px"
  } else {
    a.style.display = "block"
    a.style.left = "0px"
    b.style.left = "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 3

你来了，我刚刚对条件做了一点小小的修改！

function leftboxShow() {
  var a = document.getElementById("list-box");
  var b = document.getElementById("Show")
  if (getComputedStyle(a).display != "none") {
    a.style.display = "none"
    a.style.right = "0px"
    b.style.right = "0"
    b.style.left = "0"
  } else {
    a.style.display = "block"
    a.style.left = "0px"
    b.style.left = "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;
}
Expand snippet

<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>