滑块导航无法正常工作

Question

我似乎无法让我的导航栏切换。我希望导航栏向左切换。显然是相当新的，但我不相信我的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>

Answer 1

https://jsfiddle.net/kaa778n0/

不需要函数内部类中的点。它是一个className而不是一个选择器。

bodyEl.toggleClass('active-nav')

您将样式应用于不是导航的部分。

.active-nav nav {
    transform: translate3d(-8em, 0, 0);
    -webkit-transform: translate3d(-8em, 0, 0);
}