JavaScript:单击菜单项上的Trunk.js导航隐藏

时间:2019-06-08 22:27:55

标签: javascript jquery html

我正在使用Trunk.js,在移动版本上,当我单击具有 href =“#section_of_website” 的菜单项时,它将向下滚动到 #section_of_website 但左侧的导航栏不会隐藏。导航栏滚动到元素后将打开。

并且我需要在移动版本上,有人使用 href =“#section_of_website” 在Example FOOTER中单击打开的导航栏,它将向下滚动并打开隐藏的导航栏。

<head>
<link href="http://true-blue.sk/trunk.js/css/trunk.css" rel="stylesheet"/>
</head>
<body>

<script type="text/javascript">
	if (typeof jQuery == 'undefined')
		document.write(unescape("%3Cscript src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'" + 
															"type='text/javascript'%3E%3C/script%3E"))
</script>

<script src="http://true-blue.sk/trunk.js/js/trunk.js"></script>

<div class="container">

	<header class="slide"> 
		<ul id="navToggle" class="burger slide">
			<li></li><li></li><li></li>
		</ul>
		<h1>Trunk.js</h1>
	</header>

	<nav class="slide">
		<ul>
			<li><a href="../trunk.html" class="active">HOME</a></li>
			<li><a href="#footer">Footer</a></li>
			<li><a href="#footer">Footer</a></li>
			<li><a href="#footer">Footer</a></li>
			<li><a href="#footer">Footer</a></li>
			<li><a href="#footer">Footer</a></li>
			<li><a href="#footer">Footer</a></li>
			<li><a href="#footer">Footer</a></li>
		</ul>
	</nav>
	
	<div class="content slide">
		<ul class="responsive">
			<li class="header-section">
				<p class="placefiller">HEADER</p>
			</li>
			<li class="body-section">
				<p class="placefiller">BODY</p>
			</li>
			<li class="footer-section">
				<p id="footer" style="background: red;" class="placefiller">FOOTER</p>
			</li>
		</ul>
	</div>
	
</div>

</body>

0 个答案:

没有答案