使菜单项下，当另一个项目展开?

Question

我在我的网站上有一个侧面菜单，其中有几个内容可点击。这些在点击时展开，但我想这样做，当一个项目展开时，它只是把其他项目推到下面，而不是覆盖它们。这是我的代码。

注意:我目前只有一个可扩展设置为扩展。jQuery解决方案优于纯JavaScript。

$(document).ready(function() {
  $('.DOC_CONTAINER').click(function() {
    $(".DOC_CONTAINER").toggleClass('expanded');
    $("#icon").toggleClass("flip");
  });
});

body::-webkit-scrollbar {
  width: 0px;
}
body::-webkit-scrollbar-track {
  background: transparent;
}
body::-webkit-scrollbar-thumb {
  background-color: transparent;
  border-radius: 20px;
  border: 3px solid transparent;
}
.CONT {
  position: relative;
  top: -25px;
  left: 20px;
}
#words {
  left: 25px;
  position: relative;
}
.DOC_CONTAINER {
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  position: absolute;
  top: 20px;
  left: 0px;
  color: #0088FF;
  user-select: none;
  cursor: pointer;
  width: 280px;
  z-index: 1;
  overflow: hidden;
  height: 70px;
}
#HTML_DOC {
  font-size: 18px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 75px;
  left: 15px;
}
#CSS_DOC {
  font-size: 18px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 135px;
  left: 15px;
}
#JAVA_DOC {
  font-size: 18px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 195px;
  left: 15px;
}
#JQUERY_DOC {
  font-size: 18px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 255px;
  left: 15px;
}
#LUA_DOC {
  font-size: 18px;
  font-family: Verdana;
  font-weight: bold;
  position: relative;
  top: 315px;
  left: 15px;
}
#CREDITS {
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  position: absolute;
  top: 390px;
  left: 20px;
}
#icon {
  position: absolute;
  top: 2px;
  left: 200px;
}
#icon2 {
  position: absolute;
  top: 2px;
  left: 180px;
}
#icon3 {
  position: absolute;
  top: 2px;
  left: 100px;
}
div.DOC_CONTAINER.expanded {
  width: 390px;
  animation-name: Expand1;
  animation-duration: 0.2s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
}
@keyframes Expand1 {
  0% {
    height: 70px;
  }
  100% {
    height: 380px;
  }
}
#SEP2 {
  width: 390px;
  height: 1px;
  background-color: #2e2e2e;
  position: relative;
  top: 65px;
  left: -27px;
}
#SEP3 {
  width: 430px;
  height: 1px;
  background-color: #2e2e2e;
  position: relative;
  top: 365px;
  left: -70px;
}
#ABOUT {
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  position: absolute;
  top: 390px;
  left: 20px;
}
#COPY_RIGHT {
  font-size: 20px;
  font-family: Verdana;
  font-weight: bold;
  position: absolute;
  top: 450px;
  left: 20px;
}
div.scroll {
  margin: 4px, 4px;
  padding: 4px;
  background-color: #1f1f1f;
  width: 350px;
  height: 85vh;
  top: 127px;
  left: -5px;
  position: absolute;
  overflow: hidden;
  text-align: justify;
  border-bottom-right-radius: 20px;
}
.scroll::-webkit-scrollbar {
  width: 5px;
  color: #0088FF;
}
.scroll::-webkit-scrollbar-track {
  background: #2e2e2e;
}
.scroll::-webkit-scrollbar-thumb {
  background: #0088FF;
}
.scroll::-webkit-scrollbar-thumb:hover {
  background: #0088FF;
}
.flip {
  transform: rotateX(180deg);
  transition-duration: 0.2s;
}
.flip2 {
  transform: rotateX(360deg);
  transition-duration: 0.2s;
}
#MENU_LABEL {
  color: #0088FF;
  top: 7px;
  left: 17px;
  font-size: 20px;
  font-family: verdana;
}
body {
  height: 200vh;
  background-color: #2E2E2E;
}
a {
  color: #0088ff;
  text-decoration: none;
}
a:hover {
  color: #0056A3;
  text-decoration: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuFixed">
  <div class="scroll">
    <div class="DOC_CONTAINER">
      <div id="SEP3"></div>
      <div id="words">Documentation</div>
      <div id="icon"><i class="fa-solid fa-angle-down"></i>.
      </div>
      <div class="CONT">
        <div id="HTML_DOC"><a href="htmlDocumentation.html">HTML</a></div>
        <div id="CSS_DOC"><a href="cssdocumentation.html">CSS</a></div>
        <div id="JAVA_DOC"><a href="javascriptdocumentation.html">Javascript</a></div>
        <div id="JQUERY_DOC"><a href="querydocumentation.html">Jquery</a></div>
        <div id="LUA_DOC"><a href="luadocumentation.html">Lua</a></div>
      </div>
    </div>
    <div id="SEP2"></div>
    <div id="CREDITS"><a href="credits.html">Credits</a></div>
    <div id="ABOUT"><a href="about.html">About</a></div>
    <div id="COPY_RIGHT"><a href="copyright.html">Copyright</a>.</div>
  </div>
</div>

Answer 1

您的代码只做了一个小小的修改，就可以按预期工作了。

$(document).ready(function() {
  $('.DOC_CONTAINER').click(function(event) {
    event.preventDefault();
    $(".DOC_CONTAINER").toggleClass('expanded');
    $("#icon").toggleClass("flip");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="menuFixed">
  <div class="scroll">
    <div class="DOC_CONTAINER">
      <div id="SEP3"></div>
      <div id="words">Documentation</div>
      <div id="icon"><i class="fa-solid fa-angle-down"></i></div>
      <div class="CONT">
        <div id="HTML_DOC"><a href="htmlDocumentation.html">HTML</a></div>
        <div id="CSS_DOC"><a href="cssdocumentation.html">CSS</a></div>
        <div id="JAVA_DOC"><a href="javascriptdocumentation.html">Javascript</a></div>
        <div id="JQUERY_DOC"><a href="querydocumentation.html">Jquery</a></div>
        <div id="LUA_DOC"><a href="luadocumentation.html">Lua</a></div>
      </div>
    </div>
    <div id="SEP2"></div>
    <div id="CREDITS"><a href="credits.html">Credits</a></div>
    <div id="ABOUT"><a href="about.html">About</a></div>
    <div id="COPY_RIGHT"><a href="copyright.html">Copyright</a></div>
  </div>
</div>

当单击项时，它们将获得分配给它们的类。如果没有CSS，就无法知道这是否按照预期呈现。