jquery - 切换一个 div 会导致另一个 div 意外移动

Question

我在一个页面上有多个 div，每个 div 上都有一个切换开关。按下开关时，会出现另一个包含额外信息的 div。问题是，当我按下第一个 div 来切换它时，它会使其他 div 意外地向上移动。

HTML:

<div id="century14" class="century"></div>

<div id="century14text" class="centuryText">

  <p>Did you know that this this and that happened to William Shakespear in 1345.</p>

</div>

<div id="century15" class="century"></div>

<div id="century15text" class="centuryText">

  <p>Did you know that this this and that happened to Galileo Galilei in 1345.</p>

</div>

CSS:

.centuryText {
    width:200px;
    height:200px;
    background-color: black;
    color: white;
    z-index: 1;
    position: relative;
    font-size: 1.5em;
    border-radius: 10px;
    padding: 10px;
    display: none;
  }

  .century {
    background-color: blue;
    position: relative;
    height: 40px;
    width: 40px;
    border-radius: 20px;
    z-index: 1;
  }

  .century:hover {
    cursor: pointer;
  }
  #century14 {
    margin-left: 202.5px;
    margin-top: -361px;
  }

  #century14text {
    margin-top: -240.5px;
    margin-left: 125px;
  }

  #century15 {
    margin-left: 320px;
    margin-top: 95px;
  }

  #century15text {
    margin-top: -240.5px;
    margin-left: 240px;
  }

jQuery:

  $(document).ready(
      function(){
          $("#century14").click(function () {
              $("#century14text").fadeToggle();
          });
      });

  $(document).ready(
      function(){
          $("#century15").click(function () {
              $("#century15text").fadeToggle();
          });
      });

此外，如果你们中有人知道如何在布局或其他方面改进我的代码，请告诉我:D

谢谢

Answer 1

Toggle 会将元素下方的所有内容向上移动。您想要使用的是一个 css 选择器，以将元素保留在原来的位置:

$('#century14text').css("visibility","hidden");

然后使用它使其再次可见:

$('#century14text').css("visibility","visible");