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

切换会将元素下方的所有内容都移动。你想要使用的是一个css选择器，以保持元素原来的位置：

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

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

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

Answer 2

他们＆＃34;意外地向上移动＆＃34;因为隐藏的div现在有display:none作为其内联样式的一部分（这是jQuery在默认隐藏某些内容时所执行的操作）。因为它有display:none它不再在文档流程中并且没有大小，所有其他内容都会转移以填补空白。

当在可见元素上调用时，一旦不透明度达到0，元素的显示样式属性将设置为无，因此该元素不再影响页面的布局。

您需要编写自己的动画处理程序，以使用.fadeToggle complete callback保留div的虚拟空间。

Answer 3

这是一种方法，无需编写太多脚本。这样，如果你需要添加这样的类似元素，你就不必为每个id编写脚本。

$(document).ready(function() {
  $(".century").click(function() {
    $(this).next().toggleClass("hide");
  });
});

我将类选择器“hide”添加到你的css：

.hide {
  visibility: hidden;
}

摆脱display: none选择器中的.centuryText，这应该可行。

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

3 个答案: