Question

所以我有一个滑动垂直导航栏。我希望能够按下我的切换按钮，但它不会消失，只是停留在页面的顶部，而不是整个事情只是消失。我希望除了切换之外的一切。感谢

这是一个JSfiddle链接：
https://jsfiddle.net/fraserdale/31da97uc/
谢谢你的帮助

<body>
<div class="sidenav slideTogglebox">
    <div class="toggle change" onclick="myFunction(this)" id="slideToggle">
        <div class="bar1 animated fadeIn"></div>
        <div class="bar2 "></div>
        <div class="bar3 animated fadeIn"></div>
    </div>
  <ul class="sidebar-inner " id="modes"> 
    <li class="gamemode fa fa-3x fa-dot-circle-o active animated fadeIn"><a href="#"></a></li>
    <li class="gamemode fa fa-3x fa-pie-chart animated fadeIn"><a href="#"></a></li>
    <li class="gamemode fa fa-3x fa-delicious animated fadeIn"><a href="#"></a></li>
    <li class="gamemode fa fa-3x fa-line-chart animated fadeIn"><a href="#"></a></li>
    <li class="gamemode fa fa-3x fa-braille animated fadeIn"><a href="#"></a></li>
  </ul>
</div>
<p class="credit animated fadeIn">Memes Beta UI</p>


<script>
function myFunction(x) {
x.classList.toggle("change");
var x = document.getElementById('modes');
if (x.style.display === 'none') {
    x.style.display = 'block'
} else {
    x.style.display = 'none';
}

</script>
  <script type="text/javascript">
  $("#slideToggle").click(function () {
     $('.slideTogglebox').slideToggle();
 });
 </script>
 </body>

Answer 1

这样的东西？

$("#slideToggle").click(function(e) {
	$(this).toggleClass('change');
  var $modes = $("#modes"),
      $sidenav = $('.sidenav'),
      timer = 1000;
  if ($(this).hasClass('change')) {
    $sidenav.animate({
      height: '100vh'
    }, timer)
  } else {
    $modes.css('position','absolute');
    var autoHeight = $('.sidenav').css('height', 'auto').height();
    $sidenav.css('height', '100vh');
    $modes.css('position','relative');
    $sidenav.animate({
      height: autoHeight
    }, timer)
  }
});

body {
  background-color: #23272B;
  margin: 0px;
  padding: 0px;
  outline: none;
}

.credit {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-size: 15px;
  color: #fff;
  font-family: Verdana, Geneva, Tahoma, sans-serif
}

.sidenav {
  overflow: auto;
  font-family: verdana;
  font-size: 12px;
  font-weight: 200;
  background-color: #16191C;
  position: fixed;
  top: 0px;
  width: 125px;
  height: 100vh;
  color: #e1ffff;
  display: flex;
  flex-direction: column;
}

* {
  transition: all 500ms ease-out;
  -webkit-transition: all 500ms ease-out;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
  font-family: open sans, sans-serif;
}

.sidebar-inner {
  padding-left: 25px;
  padding-right: 25px;
  transition: 0.4s;
  flex: 1 0 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

ul .gamemode:hover {
  opacity: 1;
  background-color: #3B50D4;
  transition: 0.4s;
}

li {
  transition: all 500ms ease-out;
  -webkit-transition: all 500ms ease-out;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.active {
  background-color: #3B50D4;
}

.gamemode {
  /*border: 1px solid white;*/
  width: 65px;
  color: #fff;
  font-size: 30px;
  text-align: center;
  padding: 15%;
  /*display: block;*/
}

.toggle {
  cursor: pointer;
  width: 100%;
  padding: 25%;
  position: relative;
  background: #16191C;
  z-index: 1;
}

.bar1,
.bar2,
.bar3 {
  width: 45px;
  height: 5px;
  background-color: #333;
  margin: 6px;
  transition: 0.4s;
}


/* Rotate first bar */

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}


/* Fade out the second bar */

.change .bar2 {
  opacity: 0;
}


/* Rotate last bar */

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title>Memes</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <script src="https://use.fontawesome.com/9d0e231cc7.js"></script>
  </head>

  <body>
    <div class="sidenav slideTogglebox">
      <div class="toggle change" id="slideToggle">
        <div class="bar1 animated fadeIn"></div>
        <div class="bar2 "></div>
        <div class="bar3 animated fadeIn"></div>
      </div>
      <ul class="sidebar-inner " id="modes">
        <li class="gamemode fa fa-3x fa-dot-circle-o active animated fadeIn">
          <a href="#"></a>
        </li>
        <li class="gamemode fa fa-3x fa-pie-chart animated fadeIn">
          <a href="#"></a>
        </li>
        <li class="gamemode fa fa-3x fa-delicious animated fadeIn">
          <a href="#"></a>
        </li>
        <li class="gamemode fa fa-3x fa-line-chart animated fadeIn">
          <a href="#"></a>
        </li>
        <li class="gamemode fa fa-3x fa-braille animated fadeIn">
          <a href="#"></a>
        </li>
      </ul>
    </div>
    <p class="credit animated fadeIn">Memes Beta UI</p>

  </body>

</html>

Answer 2

我在切换时添加了一个课程。

<强> jsFiddle

$("#slideToggle").click(function() {
  $(".sidebar-inner ").toggleClass("slide-menu");
});

可切换的动画垂直导航栏

2 个答案: