在元素点击上重置typed.js

Question

当用户打开导航时，我正在使用Typed.js键入导航中的菜单链接。

我面临的问题是，第一次成功加载后，如果用户要关闭然后重新打开菜单，它将中断。看起来它运行了两次，然后运行了三遍，依此类推。

$('document').ready(function() {
	$('#nav-icon1').click(function() {
		
		$('.menu-expanded').toggle();
		$('.menu-expanded').toggleClass('wow bounceIn');
		$('.select1').toggleClass('menuTyped1');

		// $('.menuTyped1').type('reset');

		var menu1 = {
		strings: ["about us ^4000000"],
		typeSpeed: 100
		}

		var menu2 = {
		strings: ["services we offer ^4000000"],
		typeSpeed: 100
		}

		var menu3 = {
		strings: ["case studies ^4000000"],
		typeSpeed: 100
		}

		var menu4 = {
		strings: ["testimonies ^4000000"],
		typeSpeed: 100
		}

		var menu5 = {
		strings: ["get in touch ^4000000"],
		typeSpeed: 100
		}

	var menuTyped1 = new Typed(".menuTyped1", menu1);
	var menuTyped2 = new Typed(".menuTyped2", menu2);
	var menuTyped3 = new Typed(".menuTyped3", menu3);
	var menuTyped4 = new Typed(".menuTyped4", menu4);
	var menuTyped5 = new Typed(".menuTyped5", menu5);
	})


})

.menu-expanded {
display: none;
}

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.9/lib/typed.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav-icon1">
  MENU
</div>

<div class="menu-expanded">
	<div class="wrapper">
		
		<div class="menu-links">
			<ul>
				<li><a href="/about-us" id="menu1" class="select1"></a></li>
				<li><a href="/services" class="menuTyped2"></a></li>
				<li><a href="#" class="menuTyped3"></a></li>
				<li><a href="#" class="menuTyped4"></a></li>
				<li><a href="#" class="menuTyped5"></a></li>
			</ul>
		</div>
	</div>
</div>

在关闭菜单时，我尝试在每个键入的元素上使用.reset()，但这似乎不起作用。

理想情况下，我希望每次都键入它，但是如果第二次观看时它只是静态的，我也很高兴。