在最大宽度：37.em时，汉堡包下的导航样式会自动打开，当缩放到大小时，我宁愿关闭而不是打开。 它还可以让底层菜单显示在它下面（div.gallery带有可点击的单选按钮/标签），而且我宁愿导航一旦打开就会将其下面的所有内容都滑下来。
这是HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon"
type="image/png"
href="mpicon.png">
<title>The Marshall Project | About Us</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<link href="about.css" rel='stylesheet' type='text/css' />
<!-- javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<header>
<section id="space">
<section id="screen1">
<h1>About Us</h1>
</section>
<!-- navigation -->
<nav class="navigation-bar">
<a href="index.html"><img class="logo" src="mplogo.png" width="200" height="27"></a>
<a class="burger-nav"></a>
<ul class="open">
<li><a href="about.html" style="color: #E1E000;">ABOUT</a></li>
<li><a href="euro.html">EUROPEAN TUNE</a></li>
<li><a href="financial.html">FINANCIAL</a></li>
<li><a href="support.html">SUPPORT</a></li>
</ul>
</nav>
</section>
<!-- javascript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 65;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
</script>
</header>
<div class="sticky">
<div id="intro">
<i>
Investigative reporting is at the core of what we do. </i>
<div class="gallery">
<label for="raz0" title="0">ABOUT US</label>
<label for="raz1" title="1">MESSAGE FROM THE PRESIDENT</label>
<label for="raz2" title="2">WHY THE MARSHALL PROJECT?</label>
<label for="raz3" title="3">OUR TEAM</label>
<label for="raz4" title="4">CONTACT US</label>
</div>
</div>
</div>
<!-- info -->
<input type="radio" checked="checked" name="raz" id="raz0" />
<input type="radio" name="raz" id="raz1" />
<input type="radio" name="raz" id="raz2" />
<input type="radio" name="raz" id="raz3" />
<input type="radio" name="raz" id="raz4" />
<div id="contentdiv0">
<h3>ABOUT US</h3>
<p id="content0">
<img src="citizen.png" style="width: 85%; height: 85%;">
<br>
<br>
<b style="font-size: 1em;">THE MARSHALL PROJECT</b> is a nonpartisan, nonprofit news
organization that seeks to create and sustain a sense of national urgency about the U.S. criminal justice system.
<br>
<br>
We achieve this through award-winning journalism, partnerships with other news outlets and public forums. In all of our work we strive to educate and enlarge the audience of people who care about the state of criminal justice. Our reporters dive into stories that other media have missed or misunderstood. <br>
<br>
We often spend months interviewing sources, digging through documents, filing Freedom of Information Act requests, and visiting jails, prisons, courtrooms, and police stations around the United States.
<br>
<br>
We keep a close eye on breaking criminal justice news, looking for opportunities to provide context or analysis. Since our launch in November 2014, we have published a steady stream of stories, including profiles, interviews, commentaries, and first-person narratives.
</p>
</div>
<div id="contentdiv">
<h3 style="margin-bottom: -20px;">MESSAGE FROM THE PRESIDENT</h3>
<p id="content">
<i style="line-height: 25px;">
<br>The American criminal justice system is in crisis. The statistics tell the story. Even in the bitterly divided world of American politics, both liberals and conservatives have vowed their commitment to reform. Achieving it will require hard work: from advocates, criminal justice experts, law enforcement, the judiciary, and yes, good and skillful politicians.</i>
<br>
<br>
<img src="president.png" style="width: 85%; height: 85%;">
<br>
<br>
<b font-size: 1em;>IT WILL TAKE GREAT JOURNALISM. </b>
<br>
No social problems has ever been solved without shining a light into some dark corners. That’s what The Marshall Project was born to do. In just two years, we’ve published approximately 650 criminal justice stories and worked with a diverse range of media partners.
<br>
<br>
We’ve had an amazing launch. In our first year, President Barack Obama granted us an exclusive interview. By 18 months, we’d won our first Pulitzer. We’ve prompted federal investigations, informed a Supreme Court opinion, helped improve police training, and gotten cameras installed in a prison where abuse was rampant. Along the way, we’ve told fresh and important stories and given voice to Americans who were not being heard in our national conversation.
<br>
<br>
<b>We both come to this issue with hopeful hearts. </b>
<br>
Neil, a former reporter and hedge fund manager, launched The Marshall Project based on his belief that the criminal justice system is a national disgrace and high-quality journalism could help elevate the issue. Carroll, once a foreign correspondent for Newsweek, spent nearly two decades at Human Rights Watch before feeling impelled to focus on America’s biggest human rights problem: criminal justice. We’re proud to work with one of the country’s preeminent journalists, our Editor-in-Chief Bill Keller, in leading The Marshall Project.
Our aim is to create and sustain a sense of urgency about criminal justice.
We hope you will find a way to help.
</p>
</div>
<div id="contentdiv2">
<h3>WHY THE MARSHALL PROJECT?</h3>
<p id="content2"><i style="line-height: 25px;">If Marshall were alive, I have no doubt that he would place criminal justice reform high among the urgent priorities of today’s civil rights movement, and that his would be a powerful voice for change. It is for these reasons that I chose to name The Marshall Project in his honor.
<br>
— Neil Barsky, founder of The Marshall Project</i>
<br>
<br>
<img src="thurgood.png" style="width: 85%; height: 85%;">
<br>
<br>
<b style="font-size: 1em;">THURGOOD MARSHALL IS AN AMERICAN HERO.</b>
His work as a lawyer for the NAACP Legal Defense Fund, including the landmark Brown vs. Board of Education decision, laid the groundwork for the modern U.S. civil rights movement. As the first African-American justice of the U.S. Supreme Court, he was a persuasive advocate for a living and breathing Constitution that sees beyond the prejudices of revolutionary America.
<br>
<br>
Thurgood Marshall (1908-1993) was a towering figure in the civil rights movement and the first African American justice to serve on the United States Supreme Court. Before joining the court in 1967, he worked as a civil rights lawyer, famously criss-crossing the South on behalf of black clients who were facing Jim Crow justice from white police officials, prosecutors, judges and juries. In 1940, at age 32, he founded the NAACP Legal Defense and Education Fund and served as an executive there for two decades. He and his colleagues won a series of Supreme Court victories that gradually eroded the "separate but equal" doctrine, the legal underpinning of segregation in America. The most famous of those cases was Brown v. Board of Education, the landmark 1954 decision that declared unconstitutional segregation in the nation's public schools.
<br>
<br>
Marshall served on the Supreme Court for 24 years until his retirement at the end of the 1991 term. During his tenure, he was known for his strong support of First Amendment principles and was a reliable vote against the death penalty, even though he often said he was personally not opposed to capital punishment. He frequently sided with his fellow Warren Court jurists in seeking to protect and expand the constitutional rights of citizens charged with crimes, and he became a frequent dissenter during his later years as the Court moved rightward. The leader of that conservative shift, Chief Justice William Rehnquist, spoke at Marshall's funeral in 1993:
“As a result of his career as a lawyer and as a judge, Thurgood Marshall left an indelible mark, not just upon the law, but upon his country. Inscribed above the front entrance to the Supreme Court building are the words ‘Equal justice under law.’ Surely no one individual did more to make these words a reality than Thurgood Marshall.”
</p>
</div>
<div id="contentdiv3">
<h3>OUR TEAM</h3>
<p id="content3">The Marshall Project is a nonprofit news organization covering the U.S. criminal justice system. Our team draws together seasoned investigative journalists, veteran crime reporters, innovative digital producers, and experienced news editors.
<br>
<br>
Neil Barsky <i>Founder & Chairman</i><br>
Bill Keller <i>Editor-in-Chief</i><br>
Carroll Bogert <i>President</i><br>
<br>
<b>EDITORIAL</b>
<br>
Kirsten Danis <i>Managing Editor</i><br>
Andrew Cohen <i>Senior Editor</i><br>
Tom Meagher <i>Deputy Managing Editor</i><br>
Geraldine Sealey <i>Features Editor</i><br>
Maurice Chammah <i>Staff Writer</i><br>
Tatiana Craine <i>Social Media Editor</i><br>
Taylor Eldridge <i>Investigative Fellow</i><br>
Celina Fang <i>Multimedia Editor</i><br>
Anna Flagg <i>Interactive Reporter</i><br>
John Carlos Frey <i>Special Correspondent</i><br>
Justin George <i>Washington, D.C. Correspondent</i><br>
Eli Hager <i>Staff Writer</i><br>
Gabe Isman <i>Director of Technology</i><br>
Nicole Lewis <i>Tow Reporting Fellow</i><br>
Yolanda Martinez <i>Web Producer</i><br>
Joseph Neff <i>Staff Writer</i><br>
Alysia Santo <i>Staff Writer</i><br>
Beth Schwartzapfel <i>Staff Writer</i><br>
Alex Tatusian <i>Editorial Designer</i><br>
Christie Thompson <i>Staff Writer</i><br>
Abbie Vansickle <i>Staff Writer</i><br>
Manuel Villa <i>Data Reporting Fellow</i><br>
Simone Weichselbaum <i>Data Reporting Fellow</i><br>
</p>
</div>
<div id="contentdiv4">
<h3>CONTACT US</h3>
<p id="content4">
<img id="feyes" src="feyes.png" style="width: 85%; height: 85%;">
<br>
<b>General Inquiries</b><br>
Inquiries can be addressed to <br><a href="info@themarshallproject.org" target="_top">info@themarshallproject.org</a>
<br>or mailed to
<br>
The Marshall Project<br>
156 West 56th Street, Suite 701<br>
New York, NY 10019<br>
212-803-5200<br>
<br>
<b>Story Ideas and Tips</b><br>
To pitch a story idea to our editors, please email<br>
<a href="pitches@themarshallproject.org" target="_top">pitches@themarshallproject.org.</a>
<br>
To pitch opinions, essays, analysis or other commentary pieces, please email<br>
<a href="commentary@themarshallproject.org" target="_top">commentary@themarshallproject.org.</a>
<br>
<br>
<b>Media Inqueries</b>
<br>
All media and interview requests should contact Ruth Baldwin, director of communications at
<br><a href="rbaldwin@themarshallproject.org" target="_top">rbaldwin@themarshallproject.org</a>
<br>or 212-803-5270.
<br>
<br>
<b><a href="themarshallproject.org" target="_blank">themarshallproject.org</a></b></p>
</div>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="menu.js"></script>
</body>
</html>
这是CSS
/* split sides (for content) and navigation */
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
/* configuring support of HTML5 */
header, main, nav, footer, figure, figcaption, aside, section, article {
display: block;
}
/* general body styles */
body {
font-family: Franklin Gothic, Arial, sans-serif;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
#intro {
position: -webkit-sticky;
position: sticky;
top: 100px;
margin-left: 50px;
margin-top: 100px;
margin-bottom: -30px;
padding-right: 12px;
line-height: 22px;
width: 75%;
text-align: left;
}
i {
font-family: Georgia, serif;
}
p {
line-height: 22.5px;
}
/* header */
h1 {
color: #E1E000;
font-size: 4em;
margin: auto;
padding-left: 50px;
padding-top: 50px;
position: relative;
}
h2 {
font-size: 1.25em;
margin-left: 50px;
width: 78%;
color: black;
}
h3 {
/*background-color: white;*/
visibility: hidden;
opacity: 0;
color: #E1E000;
letter-spacing: 2px;
}
/* top image */
#screen1 {
background-image: url(about.png);
background-size: cover;
max-width:100%;
height:730px;
position: inherit;
}
/* navigation styles */
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
nav {
top: 0;
width: 100%;
background: #fff;
display: inline-block;
z-index: 1;
padding: 25px 25px 15px 25px;
}
nav ul {
float: right;
margin-top: 1px;
z-index: 1;
}
nav li {
display: inline;
z-index: 1;
padding: 10px;
}
nav li a:hover {
color: #E1E000;
z-index: 1;
}
li {
list-style-type: none;
}
a {
text-decoration: none;
color: black;
}
a:hover {
color: #E1E000;
text-decoration: line-through;
}
div.sticky {
width: 25%;
float: left;
margin: 0;
position: -webkit-sticky;
position: sticky;
top: 20px;
height: 1420px;
background-color: #E1E000;
}
#contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4, #contentdiv5{
position: absolute;
width: 35%;
margin-left: 500px;
margin-top: 75px;
}
#contentdiv0 a {
color: black;
}
#contentdiv0 a:hover {
color: #E1E000;
cursor: pointer;
}
#content0, #content, #content2, #content3, #content4, #content5{
/*background-color: white;*/
visibility: hidden;
opacity: 0;
}
/*clickable gallery*/
input[name="raz"] {
display: none;
}
div.gallery {
position: absolute;
top: 145%;
padding: 0;
width: 200px;
background: no-repeat 50% 0;
background-size: auto 100%;
}
div.gallery label {
display: inline-block;
width: 300px;
height: 20px;
background: no-repeat 50% 50%;
background-size: calc(100% - 5px) calc(100% - 5px);
margin: 5px;
cursor: pointer;
}
.gallery label:hover {
text-decoration: line-through;
color: white;
transition: background 0.3s ease-in;
}
#raz0:checked ~ #contentdiv0 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz1:checked ~ #contentdiv h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz2:checked ~ #contentdiv2 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz3:checked ~ #contentdiv3 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz4:checked ~ #contentdiv4 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz5:checked ~ #contentdiv5 h3 {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz0:checked ~ #contentdiv0 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz1:checked ~ #contentdiv p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz2:checked ~ #contentdiv2 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz3:checked ~ #contentdiv3 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz4:checked ~ #contentdiv4 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
#raz5:checked ~ #contentdiv5 p {
visibility: visible;
opacity: 1;
transition: .5s ease-in;
}
/* beginning of media queries - tablet display */
@media only screen and (max-width: 64em){
}
/* smartphone display */
@media only screen and (max-width: 37.5em) {
*{
height: auto;
}
.logo {
margin-top: 20px;
margin-left: 20px;
width: 50;
height: 6.75;
display: block;
}
.burger-nav {
margin-top: -80px;
display: inline-block;
height: 60px;
width: 100%;
background: url(nav.png) no-repeat 98% center;
background-color: none;
cursor: pointer;
padding: 0;
}
header {
padding-bottom: 0;
}
header .navigation-bar {
width: 100%;
padding: 0;
height: 70px;
z-index: 1;
}
header nav ul {
height: 0;
overflow: hidden;
background: #fff;
width: 100%;
padding: 0;
margin: 0;
z-index: 1;
}
header nav ul.open {
height: auto;
z-index: 1;
margin-bottom: 10px;
}
header nav ul li {
float: none;
text-align: left;
width: 100%;
margin: 0;
z-index: 1;
}
header nav li a {
color: black;
padding: 10px;
border-bottom: 1px solid #e1e000;
display: block;
margin: 0;
z-index: 1;
}
#screen1 {
position: relative;
height: 300px;
}
mobile {
display: inline;
}
div.sticky {
clear:both;
width: 100%;
min-height: 13px;
height: auto;
position: inherit;
margin-bottom: 20px;
}
#intro {
font-size: 15px;
margin: auto;
padding: 15px;
width: 90%;
max-width: 100%;
min-height: 250px;
overflow: hidden;
position: inherit;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 {
visibility: visible;
position: absolute;
margin: auto;
margin-top: 250px;
margin-left: 30px;
width: 80%;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 h2{
position: absolute;
text-align: left;
margin: auto;
padding: auto;
font-size: 3em;
margin-top: 250px;
margin-bottom: -15px;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 p {
text-align: left;
margin-top: 250px;
margin-bottom: 30px;
}
#contentdiv0, #contentdiv0, #contentdiv, #contentdiv2, #contentdiv3, #contentdiv4 h3 {
font-size: 1em;
width: 100%;
text-align: left;
margin-top: 250px;
padding: 10px;
margin-left: 15px;
}
h1 {
font-size: 3em;
width: 100%;
margin: auto;
top: 100px;
}
div.gallery {
top: 55%;
padding: 5px;
width: 300px;
background: no-repeat 50% 0;
background-size: auto 100%;
}
div.gallery label {
display: inline-block;
width: 300px;
height: 20px;
background: no-repeat 50% 50%;
background-size: calc(100% - 5px) calc(100% - 5px);
margin: 5px;
margin-left: -5px;
cursor: pointer;
}
.gallery label:hover {
text-decoration: line-through;
color: white;
transition: background 0.3s ease-in;
}
}
这是外部JS
$(document).ready(function() {
$(".burger-nav").on("click", function() {
$("header nav ul").toggleClass("open");
})
})
答案 0 :(得分：1)
对于初学者来说，你已经在html中包含了3次jquery，你可能想删除除html脚下最后一个以外的所有内容。最好在标记的末尾加载脚本标记。
您发布的代码Here's a jsfiddle，它需要图像资源链接才能正常显示，否则我无法重现您遇到的CSS问题。
/*
* Links to jsFiddle must be accompanied by code, but that particular fiddle is
* huge (~a small website), so I, Andrei Gheorghiu, decided it's not worth
* including. Besides, IMHO, in this particular case, the code is irrelevant.
*/
此外，最好使用css类来定位标记，而不是直接使用样式标记。