Question

我目前正在处理的日记有问题。我已经将问题固定在我使用的javascript上。我有div框，在您单击它们后会展开并显示内容。到目前为止，一切正常，只是内容被切断了，我不知道为什么。我在另一个网站上使用了相同的JS代码段，但在那儿工作得很好。仅仅通过这个网站，内容就被切断了。

有人看到我在这里想念的东西吗？

@import url('https://fonts.googleapis.com/css2?family=Sacramento&display=swap');
html {
  font-family: 'Sacramento', cursive;
  font-size: 30px;
  background-color: #e8d0ac;
  margin: 0;
  padding: 0px;
}

p {
  margin: 0;
  padding: 0;
}

h3 {
  margin: 0;
  padding: 0;
}

.content {
  border: 2px solid #dab378;
  background-color: #F0E0C8;
  padding: 15px 40px 15px 40px;
  margin: 0;
  width: auto;
  height: auto;
  position: relative;
  z-index: 2;
}

.border {
  position: relative;
  border: 2px solid #dab378;
  height: auto;
  padding: 10px;
  margin: 20px 50px 0 50px;
}

.topLeft {
  position: absolute;
  z-index: 3;
  top: -2px;
  left: -2px;
  background-color: transparent;
  border-top: 0px solid #dab378;
  border-bottom: 2px solid #dab378;
  border-left: 0px solid #dab378;
  border-right: 2px solid #dab378;
  border-radius: 0 0 40px 0;
  height: 40px;
  width: 40px;
}

.topLeftHide {
  position: absolute;
  top: -2px;
  left: -2px;
  background-color: #e8d0ac;
  border: 0px solid #dab378;
  border-radius: 0 0 42px 0;
  height: 42px;
  width: 42px;
}

.topRight {
  position: absolute;
  z-index: 3;
  top: -2px;
  right: -2px;
  background-color: transparent;
  border-top: 0px solid #dab378;
  border-bottom: 2px solid #dab378;
  border-left: 2px solid #dab378;
  border-right: 0px solid #dab378;
  border-radius: 0 0 0 40px;
  height: 40px;
  width: 40px;
}

.topRightHide {
  position: absolute;
  top: -2px;
  right: -2px;
  background-color: #e8d0ac;
  border: 0px solid #dab378;
  border-radius: 0 0 0 42px;
  height: 42px;
  width: 42px;
}

.bottomLeft {
  position: absolute;
  z-index: 3;
  bottom: -2px;
  left: -2px;
  background-color: transparent;
  border-top: 2px solid #dab378;
  border-bottom: 0px solid #dab378;
  border-left: 0px solid #dab378;
  border-right: 2px solid #dab378;
  border-radius: 0 40px 0 0;
  height: 40px;
  width: 40px;
}

.bottomLeftHide {
  position: absolute;
  bottom: -2px;
  left: -2px;
  background-color: #e8d0ac;
  border: 0px solid #dab378;
  border-radius: 0 42px 0 0;
  height: 42px;
  width: 42px;
}

.bottomRight {
  position: absolute;
  z-index: 3;
  bottom: -2px;
  right: -2px;
  background-color: transparent;
  border-top: 2px solid #dab378;
  border-bottom: 0px solid #dab378;
  border-left: 2px solid #dab378;
  border-right: 0px solid #dab378;
  border-radius: 40px 0 0 0;
  height: 40px;
  width: 40px;
}

.bottomRightHide {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background-color: #e8d0ac;
  border: 0px solid #dab378;
  border-radius: 42px 0 0 0;
  height: 42px;
  width: 42px;
}

.contentSection {
  overflow: hidden;
  max-height: 0;
  width: auto;
  text-align: left;
  margin: 0;
  padding: 0;
  transition: max-height 0.5s ease-out;
}

.contentText {
  margin: 10px 0 0 0;
  padding: 0;
  width: auto;
  height: auto;
}

.button {
  font-family: 'Sacramento', cursive;
  font-size: 30px;
  width: 100%;
  text-align: left;
  transition: 2s;
  cursor: pointer;
  background-color: transparent;
  border: 0px solid transparent;
  margin: 0;
}

img {
  margin: 0 auto 0 auto;
  width: auto;
  border: 5px ridge red;
  height: 200px;
  background-color: blue;
  object-fit: contain;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script>
    $(document).ready(function() {
      $(".hide-btn-ID-1").click(function() {
        $("#contentID-1").css("display", "none");
      });
      $(".show-btn-ID-1").click(function() {
        $("#contentID-2").css("display", "block");
      });
    });
  </script>
</head>

<body>
  <div class="border">
    <div class="topLeft"></div>
    <div class="topLeftHide"></div>
    <div class="topRight"></div>
    <div class="topRightHide"></div>
    <div class="bottomLeft"></div>
    <div class="bottomLeftHide"></div>
    <div class="bottomRight"></div>
    <div class="bottomRightHide"></div>
    <div class="content">
      <button onclick="myFunction('eins')" class="button"><h3>22. August 2020</h3></button>
      <div id="eins" class="contentSection">
        <div class="contentText">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
          <img src="Bilder/Test1.jpg">
        </div>
      </div>
    </div>
  </div>
  <div class="border">
    <div class="topLeft"></div>
    <div class="topLeftHide"></div>
    <div class="topRight"></div>
    <div class="topRightHide"></div>
    <div class="bottomLeft"></div>
    <div class="bottomLeftHide"></div>
    <div class="bottomRight"></div>
    <div class="bottomRightHide"></div>
    <div class="content">
      <button onclick="myFunction('zwei')" class="button"><h3>23. August 2020</h3></button>
      <div id="zwei" class="contentSection">
        <div class="contentText">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
        </div>
      </div>
    </div>
  </div>
  <div class="border">
    <div class="topLeft"></div>
    <div class="topLeftHide"></div>
    <div class="topRight"></div>
    <div class="topRightHide"></div>
    <div class="bottomLeft"></div>
    <div class="bottomLeftHide"></div>
    <div class="bottomRight"></div>
    <div class="bottomRightHide"></div>
    <div class="content">
      <button onclick="myFunction('drei')" class="button"><h3>24. August 2020</h3></button>
      <div id="drei" class="contentSection">
        <div class="contentText">
          <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
            sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
            duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </p>
        </div>
      </div>
    </div>
  </div>


  <script>
    var acc = document.getElementsByClassName("button");
    var i;
    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
      });
    }

    function myFunction(i) {}
  </script>
</body>

</html>

扩展Div：内容被切断

0 个答案: