Javascript-html 元素在第二次點擊時卡住

Question

我有一個無序列表，我有它，所以當我單擊圖像時它會彈出（以及相應的圖像定位）但是當我再次單擊圖像時，它不會 go 回到 OG 點，即使我在我的 js 文件中有 element.style.right 。 當我第一次單擊它時，js 起作用，而當我第二次單擊圖像時，div 會返回 go ......只是不是圖像本身

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

將您的b.style.right = "260px"更改為b.style.left = "0px" 。 這就是你如何將它返回到原來的 position。

我還更改了您的條件，以便您的第一次點擊會打開您的菜單。 有關更多信息，請參閱此。

 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 2

當您最初設置img樣式left ，您已設置為 0px，在您的 javascript function 中，您將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>

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>