为什么导航菜单栏无法平滑滑动？

Question

因此，我已经尝试了一切。 我正在使用CSS和Jquery来实现此效果。 假设很简单：为了响应速度，当涉及到手机宽度时，假设仅过渡到块菜单。 当用户点击它时，它会扩展菜单（通过Jquery），并假设它可以顺利打开。 但是，事实并非如此。

这是我的代码：

HTML（HTML底部的JQuery）：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The HTML5 Herald</title>
  <!-- <link type="text/css" rel="stylesheet" href="css/normalize.css"> -->
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <link rel="stylesheet" type="text/css" href="css/responsive.css"
  <!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
</head>
<body>

<header>
  <h1>Best Website Since Google</h1>
</header>

<nav>
    <ul class="showing">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="handle">Menu</div>
</nav>

<section>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed iaculis sagittis vestibulum. Fusce laoreet tincidunt massa. In rutrum et libero a venenatis. Vestibulum malesuada sem sed pharetra pellentesque. In vitae tempus enim. Quisque porta, tortor ut bibendum lacinia, leo felis fringilla quam, ac euismod risus leo ut elit. Duis ornare velit vitae urna volutpat, condimentum sagittis nunc gravida. Vivamus placerat nibh ante, a mattis metus sodales quis. Curabitur luctus eros tortor, a venenatis nunc consectetur sodales. Ut ac orci ut libero porta tempus. </p>
  </section>



<script>
    $('.handle').on('click', function() {
      $('nav ul').toggleClass('showing');
    });
</script>
</body>
</html>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    font-family: helvetica, arial, sans-serif;
}

/************************************
************** HEADER ***************
************************************/ 

header {
    background: #00795f;
    width: 100%;
    padding: 40px 0;
    text-align: center;
}

/************************************
************* NAVRBAR ***************
************************************/

nav ul {
    background-color: #43a286;
    overflow: hidden;
    color: #fff;
    padding: 0;
    text-align: center;
    margin: 0;
    -webkit-transition: max-height: 0.4s;
    -ms-transition: max-height: 0.4s;
    -moz-transition: max-height: 0.4s;
    -o-transition: max-height: 0.4s;
    transition: max-height: 0.4s;
}

nav ul li {
    display: inline-block;
    padding: 20px;
}

nav ul li:hover,
nav ul li a:hover {
    background-color: #399077;
}

nav ul li a,
nav ul li a:link {
    text-decoration: none;
    color: #fff;
}

nav ul li a:active {
    font-weight: bold;
    text-decoration: none;
}

.handle {
    width: 100%;
    background: #005c48;
    text-align: left;
    box-sizing: border-box;
    padding: 15px 10px;
    cursor: pointer;
    color: #fff;
    display: none;
}

/************************************
************** SECTION **************
************************************/

section {
    line-height: 1.5em;
    font-size: 0.9em;
    padding: 40px;
    width: 75%;
    margin: 0 auto;
}

@media screen and (max-width: 580px) {
    nav ul {
        max-height: 0;
    }

    .showing {
        max-height: 20em;
    }

    nav ul li {
        box-sizing: border-box;
        width: 100%;
        padding: 15px;
        text-align: left;
    }

    .handle {
        display: block;
    }
}

Answer 1

您需要摆脱多余的冒号。 例如，它是transition: max-height: 0.4s; 它应该只是transition: max-height 0.4s;

-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;

这是带有工作代码的JSBin 。