Question

我遇到的问题是我制作的菜单在点击按钮时会向下滑动。然而，我的菜单内容只显示50％的时间...我真的不知道如何解决这个问题。所以基本上你单击它正常显示的打开菜单，但是当我关闭并重新打开它时，它不会显示我的内容...

我使用html，css和jquery来获得这种效果。

我制作了一个代码：Codepen

$(document).ready(function() {

  var clicks = 0;
  $('.menubutton-tablet').click(function() {

    if (clicks % 2 == 0) {

      $('.menu-collapse-tablet').animate({
        'height': '375px'
      }, 500);
      $('.navbar-ul-tablet').toggleClass('slideopen');
    } else {

      $('.menu-collapse-tablet').animate({
        'height': '0px'
      }, 500)
      $('.navbar-ul-tablet').toggleClass('menutoggle');
    }
    ++clicks


  });
});

nav {
  width: 100%;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  flex-direction: column;
  background: black;
  background-position: center;
  display: flex;
}
.navbar-styles {
  border-radius: 0px;
  border-style: none;
  border-color: none;
  min-height: 100px;
  margin-bottom: 0;
  background-color: transparent;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.headerlinks {
  position: relative;
  text-decoration: none;
  list-style-type: none;
  color: white;
}
.headerlogo {
  width: 225px;
  margin-left: 10%;
  float: left;
  position: relative;
  display: inline;
}
.menubutton-tablet {
  width: 100px;
  height: 100px;
  margin-top: 1%;
  cursor: pointer;
  color: white;
}
.menubutton-tablet:hover {
  opacity: 0.8;
}
.menu-collapse-tablet {
  display: flex;
  width: 100%;
  height: 0px;
  justify-content: center;
  background: transparent;
}
.navbar-ul-tablet {
  display: none;
  -webkit-align-items: center;
  align-items: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.slideopen {
  display: flex;
}
.menutoggle {
  display: none;
}
.navbar-ul-tablet li {
  text-decoration: none;
  list-style-type: none;
  font-size: 18px;
  padding-top: 50px;
  text-shadow: 3px 2px 4px rgba(0, 0, 0, 0.50);
}
.navbar-ul-tablet li:first-child {
  padding-top: 10px;
}
.navbar-ul-tablet li:last-child {
  padding-bottom: 20px;
}
.headerlinks {
  color: white;
  font-weight: 100;
}
.headerlinks:hover {
  color: #d0021b;
}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<nav>
  <div class="navbar-styles">

    <a href="index.php">
      <img class="headerlogo" src="images/mobilelogo2.png" />
    </a>
    <p class="menubutton-tablet">Open Menu</p>

  </div>

  <div class="menu-collapse-tablet">
    <ul class="navbar-ul-tablet">
      <li><a class="headerlinks" href="assortiment.php">ASSORTIMENT</a>
      </li>
      <li><a class="headerlinks" href="overons.php">OVER ONS</a>
      </li>
      <li><a class="headerlinks" href="webshop.php">WEBSHOP</a>
      </li>
      <li><a class="headerlinks" href="#">LOGIN</a>
      </li>
      <li><a class="headerlinks" href="contact.php">CONTACT</a>
      </li>


    </ul>
  </div>
</nav>

Answer 1

您需要更改代码：

$('.menu-collapse-tablet').animate({'height': '0px'}, 500)
$('.navbar-ul-tablet').toggleClass('menutoggle');

这一个：

$('.menu-collapse-tablet').animate({'height': '0px'}, 500)
$('.navbar-ul-tablet').toggleClass('slideopen');

Answer 2

由于以下代码行，您遇到此问题。

if(clicks % 2 == 0){
 $('.menu-collapse-tablet').animate({'height': '375px'}, 500);
 $('.navbar-ul-tablet').toggleClass('slideopen');
}

您正在跟踪点击次数，当点击次数显示菜单时，您正在设置height:0px。

菜单内容仅在单击打开菜单时显示50％的时间

2 个答案: