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

你需要摆脱额外的结肠。例如，它是public list mergeAndSort(List<integer> list1, List<integer> list2){ List<integer> list3; int list2Size = list2.size(); for(int i=0;i<list2Size;i++){ list1.add(list2(i)); } // Here we got all the elements in 1 list i.e list1 int list1Size = list1.size(); for(i=0;i<list1Size;i++){ int small = 0; for(int j=i;j<list1size;j++){ if(list1(i)> list2(j)){ small = list2(j; } } list3.add(small); //Smallest 1 will be added to the new list }，它应该只是transition: max-height: 0.4s;

transition: max-height 0.4s;

带有工作代码的

Here's a JSBin。

为什么导航菜单栏没有顺畅滑动？

1 个答案: