Question

我正在尝试从网上学习一个教程，但我基本上做了它所说的一切，但由于某种原因，当屏幕变小时菜单没有出现。

    <!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>New Header Design</title>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<style type="text/css">

body{

margin :0;
padding: 0;
font-family: sans-serif;


}

header{

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

nav ul {

background-color :#43a286;
overflow :hidden;
color: white;
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;
-webkit-transition : max-height 0.4s;
}
nav ul li {

    display: inline-block;
    padding :20px;
}

nav ul li:hover{

    background-color:#399077;
}
a{

    text-decoration: none;
    color:inherit;
}
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;
    }

}
.handle{

    width:100%;
    background:#005c48;
    text-align : left;
    box-sizing: border-box;
    padding: 15px 10px;
    cursor:pointer;
    color: white;
    display: none;
}
</style>

</head>
<body>
    <header>
        <h1>Website Created</h1>
    </header>
    <nav>   
        <ul>
            <a href="#"><li>HOME</a></li>
            <a href="#"><li>ABOUT</a></li>
            <a href="#"><li>BLOG</a></li>
            <a href="#"><li>SHOP</a></li>
            <a href="#"><li>CONTACT</a></li>
        </ul>
        <div class ="handle"> <h1>Menu</h1></div>


    </nav>
    <section>
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

    </section>
    <script>
$('.handle').on('click', function(){

    $('nav ul').toggleClass('showing');
});
    </script>

</body>
</html>

所以我猜测jquery可能不对，或者在将类缩小到移动视图时必须存在类错误。需要一些帮助谢谢。

Answer 1

这是因为句柄类

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

媒体查询后调用

。在像这样的媒体查询之前移动句柄类，它将起作用。

.handle{

width:100%;
background:#005c48;
text-align : left;
box-sizing: border-box;
padding: 15px 10px;
cursor:pointer;
color: white;
display: none;
}
@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;
}

}

带有响应式设计的固定头

1 个答案: