我似乎无法让我的导航栏切换。我希望导航栏向左切换。很显然，这是很新的东西，但是我不相信我的ON CLICK功能是这里的问题。我尝试调查CSS，以了解问题所在，但找不到任何问题。问题可能只是我的JavaScript结构如何？
(function() {
var bodyEl = $('body'),
navToggleBtn = bodyEl.find('.nav-toggle-btn')
navToggleBtn.on('click', function(e){
bodyEl.toggleClass('.active-nav')
e.preventDefault()
})
})(); header{
display: flex;
}
nav {
display: block;
}
nav ul{
display: block;
}
nav {
position: fixed;
z-index: 1000;
top: 0;
bottom: 0;
width: 8em;
background: blue;
right: 0;
transform: translate3d(8em, 0, 0);
-webkit-transform: translate3d(8em, 0, 0);
transition: transform 0.4s ease;
-webkit-transition: transform 0.4s ease;
}
.active-nav nav {
transform: translate(-8em, 0, 0);
-webkit-transform: translate(-8em, 0, 0);
}
nav ul {
list-style: none;
margin-top: 100px;
}
nav ul li a{
text-decoration: none;
display: block;
text-align: center;
padding: 10px 0;
}
.nav-toggle-btn{
display: block;
position: absolute;
float: right;
width: 40px;
height: 40px;
background: red;
top: 0;
left: -2.85em;
}
section {
transition: transform 0.4s ease;
-webkit-transition: transform 0.4s ease;
}
.active-nav section {
transform: translate3d(-8em, 0, 0);
-webkit-transform: translate3d(-8em, 0, 0);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<a href="index.html"><img alt="" height="65" src="#"
width="89"></a>
<nav>
<ul>
<a href="#" class="nav-toggle-btn"></a>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="resume.html">Resume</a></li>
</ul>
</nav>
</header>https://jsfiddle.net/kaa778n0/
该函数内的类中的点是不需要的。它是一个className而不是选择器。
bodyEl.toggleClass('active-nav')
您将样式应用于该部分而不是导航。
.active-nav nav {
transform: translate3d(-8em, 0, 0);
-webkit-transform: translate3d(-8em, 0, 0);
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句