Question

我的页面中有两个主要的div：第一个包含手风琴菜单，第二个包含页面的主要文本。当我调整浏览器窗口的大小时，两个div彼此重叠，如下图所示：

如何停止？我搜索了很多以找到答案，但没有任何效果。我尝试添加overflow: auto;，float: left，我玩边缘......没有成功。

这是我的代码：

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

body#help {
    font-size: 3vmin;
    /*Background*/
    background: #444444; /* For browsers that [are shit enough to] do not support gradients */
    background: -webkit-linear-gradient(#1a8cff, #4da6ff); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#1a8cff, #4da6ff); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#1a8cff, #4da6ff); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#1a8cff, #4da6ff); /* Standard syntax */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}

.panel {
    background-color: #666666;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    width:250px;
}

#helpMenuDiv {
    display: inline-block;
    position: fixed;
    top:0px;
    bottom: auto;
    right: auto;
    left: 0px;
    width: 270px;
    height: 840px;
    order: solid 2px black;
    overflow: auto;
}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 250px;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

.accordion.active, .accordion:hover {
    background-color: #ccc;
}

.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

.accordion.active:after {
    content: "\2212";
}

#helpPageDiv {
    width: 800px;
    max-width: 800px;
    border: solid 2px black;
    margin: auto;
}

<!DOCTYPE html>
<html id="helpHtml">
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style/style.css">
    </head>
    <body id="help">

<!---Introduction--->    
    
    <div id="helpPageDiv">
       <p>Content of the first div (main text)</p>
    </div>
    
<!---Accordion--->
    <div id="helpMenuDiv">
        <button class="accordion">Section 1</button>
        <div class="panel">
        <p class="panelText">Content of the accordion</p>
        </div>

        <!---More accordions--->
    
    <script src="scripts/accordion.js"></script> 
</body>
</html>

提前感谢您的回答！

Answer 1

我有两个建议。

您可以使用通过窗口调整大小更改的Jquery为helpPageDiv左边距等于helpMenuDiv的宽度。

尝试为helpMenuDiv和helpPageDiv提供宽度并让它们向左浮动。此外，您可以将菜单放在内容div上方的小屏幕中。

这是我创建了一个可能对您有用的简单示例。 >>> JSFiddle。尝试调整结果窗口的大小。

$('.menu .menu-item h3').click(function() {
  $(this).siblings('p').slideToggle();
});

.holder:after{
  content: '';
  display: block;
  clear: both;
}
.menu {
  width: 20%;
  float: left;
  background: #64c1be;
}

.content {
  width: 80%;
  height: 200px;
  float: left;
  background: #73c379;
}
.content .inner{
  color: #4d4d4d;
  border: 1px solid green;
  margin: 5px;
  padding: 5px;
}

.menu .menu-item {
  background: #ddd;
  margin: 10px 0;
}

.menu .menu-item h3 {
  background: #ccc;
  margin: 0;
  cursor: pointer;
}

.menu .menu-item p {
  margin: 0;
  padding: 5px 3px;
  display: none;
}


@media (max-width: 550px){
  .menu, .content{
    width: 100%;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="holder">
  <div class="menu">
    Accordian menu
    <div class="menu-item">
      <h3>
        + Section 1
      </h3>
      <p>
        Menu content
      </p>
    </div>

    <div class="menu-item">
      <h3>
        + Section 2
      </h3>
      <p>
        Text Text
      </p>
    </div>
    
    <div class="menu-item">
      <h3>
        + Section 3
      </h3>
      <p>
        faucibus orci
      </p>
    </div>
    
    <div class="menu-item">
      <h3>
        + Section 4
      </h3>
      <p>
        ullamcorper 
      </p>
    </div>
    
  </div>
  
  <div class="content">
    Content goes here
    <div class="inner">
      Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula.
    </div>
  </div>
</div>

如何让div停止相互重叠

1 个答案: