按下切換按鈕會影響 jQuery 中 div 的位置

Question

我嘗試搜索以前被問過的其他問題，但似乎找不到與我的情況相關的問題。 我會盡力解釋。

我希望能夠在我的項目中按下“Tuner On”按鈕，它可以在清除任何文本的矩形米色屏幕之間切換，但同時，不要更改頂部顯示“節拍器”的位置右上角。 每次我按下“Tuner On”切換按鈕時，它都會向上移動“Metronome”矩形，同時清除字母“A”。

如何使切換按鈕不會改變“節拍器”的位置？

 $(document).ready(function() { $("button.GreyRectangle1").click(function() { $("div.ReceivedNote").toggleClass('ReceivedNote1'); }) })

 .ReceivedNote { z-index: 4; } .ReceivedNote1 { display: none; } .metronome-box { position: fixed; } .Metronome { font-family: arial; color: white; background-color: black; transform: scaleX(1.2); font-size: 0.5em; height: 10px; width: 60px; border-radius: 3px; margin-top: -17px; margin-left: 185px; z-index: 2; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="Orange"> <div class="ReceivedNote">A</div> <div class="metronome-box"> <div class="Metronome">METRONOME</div> </div> </div> <div class="top-trapezoid"></div> <div class="right-trapezoid"></div> <div class="bottom-trapezoid"></div> <div class="left-trapezoid"></div> <p class="tuner-on">TUNER ON</p> <button class="GreyRectangle1"> <div class="InnerGreyDot" style="margin-top: 2px;"></div> </button>

我的 jsfiddle

Answer 1

訣竅是使用visibility:hidden而不是display:none 。