Question

我正在尝试创建一个展开式菜单，其中每个标题控制一个div链接。事实上，我的代码中的所有内容都由div（即标题和内容）组成。每当我点击标题div时，内容div就会增长并显示其内容。我的问题是内容div将其他所有东西都推开了。它挤进中间。我想要的是一个固定的活动标题，而它下面的所有内容和它的内容都被推下来。

＆＃13;

$(document).ready(function() {
  var $switch = 1;
  var $last;

  // Closes drawers. Removes header 
  // selections.
  function clear() {
    $(".m-title").removeClass("active");
    $(".drawer").removeClass("open");
    $last = null;
  }

  /* • Opens/Closes drawer by its header. 
     • Enables consistent opening/closing of
       the same drawer.*/
  function load(element) {
    var $temp = element.index();

    if ($temp == $last)
      clear();
    else {
      clear();
      element.addClass("active");
      element.next().addClass("open");
      $last = element.index();
    }

  }

  // Listens for header clicks.
  $(".m-title").click(function() {
    load($(this));
  });

  // Does the same thing as clear(), but with   // a button.
  $("#button").click(function() {
    $(".m-title").removeClass("active");
    $(".drawer").removeClass("open");
  });

});

＆＃13;

body {
  background: #595959;
}
#container {
  display: flex;
  justify-content: center;
  /*End FLEX*/
  min-width: 350px;
  width: 65%;
  height: 700px;
  margin-right: auto;
  margin-left: auto;
  background: #191919;
  border: solid 1px #101010;
  box-shadow: -1px 1px 0px 0px #555;
}
#m-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  /*End FLEX*/
  min-width: 300px;
  max-width: 500px;
  width: 65%;
  height: auto;
  border: solid 1px red;
  color: wheat;
}
.m-title {
  display: flex;
  justify-content: center;
  align-self: center;
  /*End FLEX*/
  width: 100%;
  border: solid 1px black;
  transition: .5s;
}
.m-title:hover {
  background: rgba(60, 60, 60, 0.5);
  cursor: pointer;
  transition: .5s;
}
.m-title:active {
  background: rgba(75, 75, 75, 0.5);
  transition: .1s;
}
.m-title span {
  align-self: center;
  /*End FLEX*/
  font-family: sans-serif;
  font-size: 24px;
  padding: 24px;
}
.m-title.active {
  background: rgba(160, 60, 60, 0.5);
  /*Highlights active header*/
}
.drawer {
  height: 0px;
  /*Closes drawer*/
  width: 100%;
  border: solid 1px green;
  align-self: center;
  transition: .5s;
}
.drawer.open {
  height: 100px;
  position: relative;
  transition: .5s;
}
#button {
  display: flex;
  justify-content: center;
  width: 75px;
  height: 50px;
  background: green;
}
#button:hover {
  cursor: pointer;
}
#button span {
  align-self: center;
}

＆＃13;

<div id="container">
  <div id="m-wrap">
    <div id="m-map" class="m-title"> <span>Site Map</span>
    </div>
    <div id="m-draw1" class="drawer"></div>
    <div id="m-about" class="m-title"> <span>About</span>
    </div>
    <div id="m-draw2" class="drawer"></div>
    <div id="m-emp" class="m-title"> <span>Employee Services</span>
    </div>
    <div id="m-draw3" class="drawer"></div>
    <div id="m-serv" class="m-title"> <span>Services</span>
    </div>
    <div id="m-draw4" class="drawer"></div>
    <div id="button"> <span>clear</span>
    </div>
  </div>
</div>

＆＃13;

这是我创建的fiddle。有趣的是，jsfiddle的侧边栏就像我希望我的菜单一样。这可以用所有的div来完成，还是应该以另一种方式解决这个问题？

Answer 1

要进行下推，请在css中更改此内容：

#m-wrap {
  display: flex;
  flex-direction: column;
  /* justify-content: center;          commented out   */
  /* align-self: center;               commented out   */

评论请求的更新

要将其置于容器中心，您可以这样做：

#container {
  display: flex;
  justify-content: center;
  /*End FLEX*/

  min-width: 350px;
  width: 65%;
  /* height: 700px;             commented out   */
  padding: 100px 0;         /*  added padding   */

Answer 2

只需删除或更改div id =＆＃34; container＆＃34;的显示属性。你可能会使用css或jquery为这个div提供一个位置。

当top div扩展

2 个答案: