问题描述
我想在我的reactjs代码中复制this codpepen example。我可以得到使用CSS设置样式的确切页面，但是单击按钮时屏幕对齐不会发生，这是jscript / jquery的工作。由于是reactjs的新手，请帮助我。
中作为参考$('.nav-toggle').click(function(e) {
e.preventDefault();
$("html").toggleClass("openNav");
$(".nav-toggle").toggleClass("active");
});body {
font-family: 'Work Sans',sans-serif;
margin: 0;
background-color: #eee;
}
/* Layout */
#container {
padding: 0;
margin: 0;
background-color: #fff;
}
#main {
padding: 4% 1.5em;
max-width: 55em;
margin: 0 auto;
}
#header {
padding: 1.5em;
margin: 0 0 1em 0;
background-color: #eee;
}
#footer {
padding: 1.5em;
margin: 2em 0 0 0;
background-color: #eee;
}
/* Menu Styles */
.primary-nav {
position: fixed;
z-index: 999;
}
.menu {
position: relative;
}
.menu ul {
margin: 0;
padding: 0;
list-style: none;
}
.open-panel {
border: none;
background-color:#fff;
padding: 0;
}
.hamburger {
background: #fff;
position: relative;
display: block;
text-align: center;
padding: 13px 0;
width: 50px;
height: 73px;
left: 0;
top: 0;
z-index: 1000;
cursor: pointer;
}
.hamburger:before {
content:"\2630"; /* hamburger icon */
display: block;
color: #000;
line-height: 32px;
font-size: 16px;
}
.openNav .hamburger:before {
content:"\2715"; /* close icon */
display: block;
color: #000;
line-height: 32px;
font-size: 16px;
}
.hamburger:hover:before {
color: #777;
}
.primary-nav .menu li {
position: relative;
}
.menu .icon {
position: absolute;
top: 12px;
right: 10px;
pointer-events: none;
width: 24px;
height: 24px;
color: #fff;
}
.menu,.menu a,.menu a:visited {
color: #aaa;
text-decoration: none!important;
position: relative;
}
.menu a {
display: block;
white-space: Nowrap;
padding: 1em;
font-size: 14px;
}
.menu a:hover {
color: #fff;
}
.menu {
margin-bottom: 3em;
}
.menu-dropdown li .icon {
color: #777;
}
.menu-dropdown li:hover .icon {
color: #fff;
}
.menu label {
margin-bottom: 0;
display: block;
}
.menu label:hover {
cursor: pointer;
}
.menu input[type="checkBox"] {
display: none;
}
input#menu[type="checkBox"] {
display: none;
}
.sub-menu-dropdown {
display: none;
}
.new-wrapper {
position: absolute;
left: 50px;
width: calc(100% - 50px);
transition: transform .45s cubic-bezier(0.77,0.175,1);
}
#menu:checked + ul.menu-dropdown {
left: 0;
-webkit-animation: all .45s cubic-bezier(0.77,1);
animation: all .45s cubic-bezier(0.77,1);
}
.sub-menu-checkBox:checked + ul.sub-menu-dropdown {
display: block!important;
-webkit-animation: grow .45s cubic-bezier(0.77,1);
animation: grow .45s cubic-bezier(0.77,1);
}
.openNav .new-wrapper {
position: absolute;
transform: translate3d(200px,0);
width: calc(100% - 250px);
transition: transform .45s cubic-bezier(0.77,1);
}
.downarrow {
background: transparent;
position: absolute;
right: 50px;
top: 12px;
color: #777;
width: 24px;
height: 24px;
text-align: center;
display: block;
}
.downarrow:hover {
color: #fff;
}
.menu {
position: absolute;
display: block;
left: -200px;
top: 0;
width: 250px;
transition: all 0.45s cubic-bezier(0.77,1);
background-color: #000;
z-index: 999;
}
.menu-dropdown {
top: 0;
overflow-y: auto;
}
.overflow-container {
position: relative;
height: calc(100vh - 73px)!important;
overflow-y: auto;
border-top: 73px solid #fff;
z-index: -1;
display:block;
}
.menu a.logotype {
position: absolute!important;
top: 11px;
left: 55px;
display: block;
font-family: 'Work Sans',sans-serif;
text-transform: uppercase;
font-weight: 800;
color: #000;
font-size: 21px;
padding: 10px;
}
.menu a.logotype span {
font-weight: 400;
}
.menu a.logotype:hover {
color: #777;
}
.sub-menu-dropdown {
background-color: #333;
}
.menu:hover {
position: absolute;
left: 0;
top: 0;
}
.openNav .menu:hover {
position: absolute;
left: -200px;
top: 73px;
}
.openNav .menu {
top: 73px;
transform: translate3d(200px,0);
transition: transform .45s cubic-bezier(0.77,1);
}
/* label.hamburger {
display: none;
} */
/* look and feel only,not needed for core menu*/
@-webkit-keyframes grow {
0% {
display: none;
opacity: 0;
}
50% {
display: block;
opacity: 0.5;
}
100% {
opacity: 1;
}
}
@keyframes grow {
0% {
display: none;
opacity: 0;
}
50% {
display: block;
opacity: 0.5;
}
100% {
opacity: 1
}
}
/* Text meant only for screen readers. */
.screen-reader-text {
clip: rect(1px,1px,1px);
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: #f1f1f1;
border-radius: 3px;
-webkit-Box-shadow: 0 0 2px 2px rgba(0,0.6);
Box-shadow: 0 0 2px 2px rgba(0,0.6);
clip: auto !important;
color: #21759b;
display: block;
font-size: 14px;
font-size: 0.875rem;
font-weight: bold;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
/* Above WP toolbar. */
}
/* Resposive Typography */
body,button,input,select,optgroup,textarea {
color: #000;
font-size: 1em;
line-height: 1.5;
font-weight: 300;
}
h1,h2,h3,h4,h5,h6 {
clear: both;
font-weight: 800;
}
dfn,cite,em,i {
font-style: italic;
}
blockquote {
margin: 0 1.5em;
}
address {
margin: 0 0 1.5em;
}
pre {
background: #eee;
font-family: "Courier 10 Pitch",Courier,monospace;
font-size: 15px;
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1.6em;
max-width: 100%;
overflow: auto;
padding: 1.6em;
}
code,kbd,tt,var {
font-family: Monaco,Consolas,"AnDale Mono","DejaVu Sans Mono",monospace;
font-size: 15px;
font-size: 0.9375rem;
}
abbr,acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
mark,ins {
background: #fff9c0;
text-decoration: none;
}
big {
font-size: 125%;
}
.light {
color:#ddd;
}
strong {
font-weight: 600;
}
cite,i {
font-style: italic;
}
p.big {
font-size: 140%;
line-height: 1.3em;
}
p.small {
font-size: 80%;
}
blockquote {
display:block;
margin: 1em 20px;
padding: 0 1em;
position:relative;
}
blockquote:before {
}
blockquote cite,blockquote em,blockquote i {
font-style: italic;
}
abbr,acronym {
border-bottom: 1px dotted #666;
cursor: help;
}
sup,sub {
height: 0;
line-height: 1;
vertical-align: baseline;
position: relative;
}
sup {
bottom: 1ex;
}
sub {
top: .5ex;
}
p {
font-size: 1em;
margin: 0 0 2em 0;
}
article:last-of-type,p:last-of-type {
margin-bottom: 0;
}
p.intro {
font-size:1.25em;
line-height: 1.5;
font-weight:300;
margin: 0 0 1.5em 0;
}
h1,h2 {
letter-spacing: -1px;
}
h1,.h1,.h2,.h3,.h4 {
margin: 0 0 0.5em 0;
line-height: 1.1;
}
h1,.h1 {font-size: 2.074em;}
h2,.h2 {font-size: 1.728em;}
h3,.h3 {font-size: 1.44em;}
h4,.h4 {font-size: 1.2em;}
/* Medium Screen Typography - Scale: 1.333 Perfect Fourth (thanks http://type-scale.com/) */
@media screen and (min-width: 42em) {
h1,.h1 { letter-spacing: -2px; }
h1,.h1 {font-size: 3.157em;}
h2,.h2 {font-size: 2.369em;}
h3,.h3 {font-size: 1.777em;}
h4,.h4 {font-size: 1.333em;}
p { font-size:1.0625em; }
p.intro { font-size:1.3em; }
}
/* Large Screen Typography - Scale: 1.414 Augmented Fourth (thanks http://type-scale.com/) */
@media screen and (min-width: 72em) {
h1 { letter-spacing: -3px; }
h1,.h1 { margin-bottom: 0.35em; font-size: 3.998em; }
h2,.h2 { font-size: 2.827em; }
h3,.h3 { font-size: 1.999em; }
h4,.h4 { font-size: 1.414em; }
p { font-size:1.125em; }
p.intro { font-size:1.4em; }
}<div class="primary-nav">
<button href="#" class="hamburger open-panel nav-toggle">
<span class="screen-reader-text">Menu</span>
</button>
<nav role="navigation" class="menu">
<a href="#" class="logotype">logo<span>TYPE</span></a>
<div class="overflow-container">
<ul class="menu-dropdown">
<li><a href="#">Dashboard</a><span class="icon"><i class="fa fa-dashboard"></i></span></li>
<li class="menu-hasdropdown">
<a href="#">Settings</a><span class="icon"><i class="fa fa-gear"></i></span>
<label title="toggle menu" for="settings">
<span class="downarrow"><i class="fa fa-caret-down"></i></span>
</label>
<input type="checkBox" class="sub-menu-checkBox" id="settings" />
<ul class="sub-menu-dropdown">
<li><a href="">Profile</a></li>
<li><a href="">Security</a></li>
<li><a href="">Account</a></li>
</ul>
</li>
<li><a href="#">Favourites</a><span class="icon"><i class="fa fa-heart"></i></span></li>
<li><a href="#">Messages</a><span class="icon"><i class="fa fa-envelope"></i></span></li>
</ul>
</div>
</nav>
</div>
<div class="new-wrapper">
<div id="main">
<div id="main-contents">
<h1>Multi-level Side Navigation</h1>
<p class="intro"><strong>This is a multi-level side navigation pattern with hover and push</strong>. Hovering over the menu will reveal its lables and clicking the hamburger icon pins the menu open.</p>
<h2>CheckBox Hack</h2>
<p>I started by using the checkBox hack but ran into its limitations when I tried to implement the 'push' behavIoUr. It works for the secondary menus but the input element and its corresponding label can really only affect the adjacent element (i.e. I
Couldn't target the page container to push it over). So,I added...</p>
<h2>A Touch of jQuery</h2>
<p>I'm sure this Could be done with vanilla javascript,but that is not my strong suit. So here we are. You might be thinking,"Why not just use JQuery for all of the functionality?" Well,you can! Fork it and go nuts! Maybe drop me a line if you do.</p>
<p class="small"><strong>This is small text</strong>. Lorem Ipsum is simply dummy text from the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,when an unkNown printer took a galley of type and scrambled
it to make a type specimen book. It has survived not only five centuries,but also the leap into electronic typesetting,remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
</div>
</div>解决方法
您不应该只是在项目中包含jQuery，而只是向元素添加click事件监听器。但是如果需要的话：
这是一个沙箱https://codesandbox.io/s/silent-architecture-s8ert
这里是一个不错的博客https://medium.com/@kingrayhan/how-do-i-use-jquery-in-react-app-976c124f5448