Question

我尝试搜索以前提出的其他问题，但似乎找不到与我的情况相关的问题。我会尽力解释。

我希望能够在项目中按下“打开调谐器”按钮，以在清除任何文本的矩形米色屏幕之间进行切换，但同时不要更改“ Metronome”的位置在右上角。每次我按下“调谐器打开”切换按钮时，都会将“ 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>

my jsfiddle

Answer 1

诀窍是使用visibility:hidden而不是display:none。

按下切换按钮会影响div在jQuery中的位置

1 个答案: