我的菜单在 Dekstop模式中消失了，而在电话模式下它正确显示了，我不明白问题是什么。 我试图查看“捕获”框是否覆盖了框菜单，但我不知道如何进行操作。
我有一个问题，现在已经六个小时无法解决
我这个问题已经有6个小时了，但我无法解决 非常感谢您的帮助。
$(".header__icon-bar").click(function(e){
$(".header__menu").toggleClass('is-open');
e.preventDefault();
});html,body{height: 100%;}
body{background: #eee;}
/*---------------------------
general
---------------------------*/
.animate{
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.button{display: inline-block;background: #fff; color:#000;padding:15px 30px; border-radius:3px;text-decoration: none; }
.p{line-height: 22px}
/*---------------------------
header
---------------------------*/
.header{background: #333}
.header__logo{color: #fff; float:left;display: block;padding:20px;text-decoration: none;}
.header__menu{float:right;margin:0;padding:0;}
.header__menu__item{display: inline-block;}
.header__menu__item a{color:#fff;display: block;padding:20px;text-decoration: none;}
.header__menu__item a:hover{background: #000}
.header__icon-bar{display:block;float: right;padding: 20px;display: none;}
.header__icon-bar span{display: block;height:3px; width:30px;background: #fff; margin-bottom: 5px;}
/*---------------------------
Cover
---------------------------*/
.cover{height:70%;
background-image: url(https://source.unsplash.com/category/technology);
background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-position: center center;
position:relative;
}
.cover__filter{background: #000;width:100%;height: 100%;position: absolute;z-index: 0;opacity: 0.5;}
.cover__caption {display: table;height: 100%;width:100%;position: relative;z-index: 1; padding: 0 20px}
.cover__caption__copy{display: table-cell;vertical-align: middle;text-align: center;color: #fff;}
/*---------------------------
Cards
---------------------------*/
.cards{max-width: 1200px; margin: 40px auto;}
.card{width: 30%; margin:0 1.5%;background: #fff;float: left;}
.card__image{width:100%; height: auto;}
.card_copy{padding:5px 20px;}
.card_copy h3{margin-bottom:0}
/*---------------------------
Tablet
---------------------------*/
@media (max-width: 998px){
}
/*---------------------------
Smartphone
---------------------------*/
@media (max-width: 767px){
header{position:fixed; z-index: 100; width: 100%}
.header__icon-bar{display: block;}
.header__menu{width: 100%;height:0px; overflow: hidden;}
.header__menu__item{display: block;}
.is-open{height:300px; overflow: auto;}
/*Cover*/
.cover{height:100%;}
/*Cards*/
.card{width:90%; margin:5%;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header class="header clearfix">
<a href="" class="header__logo">Logo</a>
<a href="" class="header__icon-bar">
<span></span>
<span></span>
<span></span>
</a>
<ul class="header__menu animate">
<li class="header__menu__item"><a href="">Item</a></li>
<li class="header__menu__item"><a href="">Item</a></li>
<li class="header__menu__item"><a href="">Item</a></li>
<li class="header__menu__item"><a href="">Item</a></li>
<li class="header__menu__item"><a href="">Item</a></li>
</ul>
</header>
<section class="cover">
<div class="cover__filter"></div>
<div class="cover__caption">
<div class="cover__caption__copy">
<h1>Primary message of the home</h1>
<h2>Subtitle of the home page</h2>
<a href="" class="button">Call to action</a>
</div>
</div>
</section>
<section class="cards clearfix">
<div class="card">
<img class="card__image"src="https://source.unsplash.com/category/nature/400x260" alt="Nature">
<div class="card_copy">
<h3>Title Card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="card">
<img class="card__image"src="https://source.unsplash.com/category/food/400x260" alt="Nature">
<div class="card_copy">
<h3>Title Card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="card">
<img class="card__image"src="https://source.unsplash.com/category/people/400x260" alt="Nature">
<div class="card_copy">
<h3>Title Card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
答案 0 :(得分：3)
在查看代码时，您忘记了关闭@media查询。
所以我认为您需要在<
处添加}.card { width:90%, margin:5%
答案 1 :(得分：2)
希望这行得通
$(".header__icon-bar").click(function(e){
$(".header__menu").toggleClass('is-open');
e.preventDefault();
});html,body{height: 100%;}
body{background: #eee;}
/*---------------------------
general
---------------------------*/
.animate{
-webkit-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
.button{display: inline-block;background: #fff; color:#000;padding:15px 30px; border-radius:3px;text-decoration: none; }
.p{line-height: 22px}
/*---------------------------
header
---------------------------*/
.header{background: #333}
.header__logo{color: #fff; float:left;display: block;padding:20px;text-decoration: none;}
.header__menu{float:right;margin:0;padding:0;}
.header__menu__item{display: inline-block;}
.header__menu__item a{color:#fff;display: block;padding:20px;text-decoration: none;}
.header__menu__item a:hover{background: #000}
.header__icon-bar{display:block;float: right;padding: 20px;display: none;}
.header__icon-bar span{display: block;height:3px; width:30px;background: #fff; margin-bottom: 5px;}
/*---------------------------
Cover
---------------------------*/
.cover{height:70%;
background-image: url(https://source.unsplash.com/category/technology);
background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-position: center center;
position:relative;
}
.cover__filter{background: #000;width:100%;height: 100%;position: absolute;z-index: 0;opacity: 0.5;}
.cover__caption {display: table;height: 100%;width:100%;position: relative;z-index: 1; padding: 0 20px}
.cover__caption__copy{display: table-cell;vertical-align: middle;text-align: center;color: #fff;}
/*---------------------------
Cards
---------------------------*/
.cards{max-width: 1200px; margin: 40px auto;}
.card{width: 30%; margin:0 1.5%;background: #fff;float: left;}
.card__image{width:100%; height: auto;}
.card_copy{padding:5px 20px;}
.card_copy h3{margin-bottom:0}
/*---------------------------
Tablet
---------------------------*/
@media (max-width: 998px){
}
/*---------------------------
Smartphone
---------------------------*/
@media (max-width: 767px){
header{position:fixed; z-index: 100; width: 100%}
.header__icon-bar{display: block;}
.header__menu{width: 100%;height:0px; overflow: hidden;}
.header__menu__item{display: block;}
.is-open{height:300px; overflow: auto;}
/*Cover*/
.cover{height:100%;}
/*Cards*/
.card{width:90%; margin:5%;}
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.css">
<link rel="stylesheet" href="style.css">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<header class="header clearfix">
<a href="" class="header__logo">Logo</a>
<a href="" class="header__icon-bar">
<span></span>
<span></span>
<span></span>
</a>
<ul class="header__menu animate">
<li class="header__menu__item"><a href="">Item</a></li>
<li class="header__menu__item"><a href="">Item</a></li>
<li class="header__menu__item"><a href="">Item</a></li>
<li class="header__menu__item"><a href="">Item</a></li>
<li class="header__menu__item"><a href="">Item</a></li>
</ul>
</header>
<section class="cover">
<div class="cover__filter"></div>
<div class="cover__caption">
<div class="cover__caption__copy">
<h1>Primary message of the home</h1>
<h2>Subtitle of the home page</h2>
<a href="" class="button">Call to action</a>
</div>
</div>
</section>
<section class="cards clearfix">
<div class="card">
<img class="card__image"src="https://source.unsplash.com/category/nature/400x260" alt="Nature">
<div class="card_copy">
<h3>Title Card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="card">
<img class="card__image"src="https://source.unsplash.com/category/food/400x260" alt="Nature">
<div class="card_copy">
<h3>Title Card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<div class="card">
<img class="card__image"src="https://source.unsplash.com/category/people/400x260" alt="Nature">
<div class="card_copy">
<h3>Title Card</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>