切换菜单时如何替换DIV容器

Question

this code基于Bulma CSS framework：

$(document).ready(function(){
  $(".nav-toggle").click(function(){
    $(".nav-menu").toggleClass("is-active");
  });
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <div class="nav-left">
    <a class="nav-item">
      <strong>LOGO</strong>
    </a>
  </div>

  <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
  <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
  <span class="nav-toggle">
    <span></span>
    <span></span>
    <span></span>
  </span>

  <!-- This "nav-menu" is hidden on mobile -->
  <!-- Add the modifier "is-active" to display it on mobile -->
  <div class="nav-right nav-menu">
    <a class="nav-item">
      Home
    </a>
    <a class="nav-item">
      Info
    </a>
    <a class="nav-item">
      Contact
    </a>

  </div>
</nav>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt harum corporis nobis cupiditate minima cum quisquam fugiat, laudantium optio est ex itaque molestias alias tempore laboriosam in quae numquam quas.</p>
</div>

点击.nav-toggle后.container涵盖.nav-menu。

显示/显示.container时.nav-menu如何移位？

注意：如果您看不到hamburguer菜单，请尝试调整浏览器窗口的大小。

Answer 1

使用absolute时，您需要计算菜单height然后切换并增加margin-top container

$(document).ready(function(){
  $(".nav-toggle").click(function(){
    $(".nav-menu").toggleClass("is-active");
    $(".container").toggleClass("contaianerShift");
  });
});

.contaianerShift {
 margin-top:160px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <div class="nav-left">
    <a class="nav-item">
      <strong>LOGO</strong>
    </a>
  </div>

  <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
  <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
  <span class="nav-toggle">
    <span></span>
    <span></span>
    <span></span>
  </span>

  <!-- This "nav-menu" is hidden on mobile -->
  <!-- Add the modifier "is-active" to display it on mobile -->
  <div class="nav-right nav-menu">
    <a class="nav-item">
      Home
    </a>
    <a class="nav-item">
      Info
    </a>
    <a class="nav-item">
      Contact
    </a>

  </div>
</nav>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt harum corporis nobis cupiditate minima cum quisquam fugiat, laudantium optio est ex itaque molestias alias tempore laboriosam in quae numquam quas.</p>
</div>

Answer 2

我希望我理解。然而，这是一个黑客，并不是那么好，但有效。

＆＃13;

＆＃13;

$(document).ready(function(){
  $(".nav-toggle").click(function(){
    $(".nav-menu").toggleClass("is-active");
    if ($(".nav-menu").hasClass("is-active")) {
      $(".container").css('margin-top', $(".nav-menu").height() + 'px');
    } else {
      $(".container").css('margin-top', '0px');
    }
  });
});

＆＃13;

<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.1/css/bulma.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav">
  <div class="nav-left">
    <a class="nav-item">
      <strong>LOGO</strong>
    </a>
  </div>

  <!-- This "nav-toggle" hamburger menu is only visible on mobile -->
  <!-- You need JavaScript to toggle the "is-active" class on "nav-menu" -->
  <span class="nav-toggle">
    <span></span>
    <span></span>
    <span></span>
  </span>

  <!-- This "nav-menu" is hidden on mobile -->
  <!-- Add the modifier "is-active" to display it on mobile -->
  <div class="nav-right nav-menu">
    <a class="nav-item">
      Home
    </a>
    <a class="nav-item">
      Info
    </a>
    <a class="nav-item">
      Contact
    </a>

  </div>
</nav>
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt harum corporis nobis cupiditate minima cum quisquam fugiat, laudantium optio est ex itaque molestias alias tempore laboriosam in quae numquam quas.</p>
</div>

＆＃13;

＆＃13;

＆＃13;