Question

点击导航项目（链接）时，我试图让我的自适应导航崩溃。

这是我的导航：

<nav class="nav">
 <ul>
  <li class="nav-item"><a href="#overview">Overview</a></li>
  <li class="nav-item"><a href="#amenities">Amenities</a></li>
  <li class="nav-item"><a href="#residences">Residences</a></li>
  <li class="nav-item"><a href="#neighborhood">Neighborhood</a></li>
  <li class="nav-item"><a href="#availability">Availability</a></li>
  <li class="nav-item"><a href="#contact">Contact</a></li>
  <a href="#" target="_blank"><li class="btn login">Login</li></a>
  <a href="javascript:void(0);" onclick="myFunction()"><li class="nav-toggle"></li></a>
 </ul>
</nav>

以下是响应式导航扩展的方式：

<script>
  function myFunction() {
  document.getElementsByClassName("nav")[0].classList.toggle("responsive");
  }
</script>

Answer 1

我不确定你为什么要将旧学校列表标签与现代导航混合，因为你不需要它们。

如果您希望菜单在选择时折叠，您可以使用这种简洁的技术：

<nav style="position:absolute; left:20px; top:50px;">

<div onclick="TheBox.removeAttribute('open');">

<details id="TheBox"><summary>Choices</summary>

<a href="javascript:void(0)" target="_blank" title="">Home</a><br>
<a href="javascript:void(0)" target="_blank" title="">About</a><br>
<a href="javascript:void(0)" target="_blank" title="">Products</a><br>
<a href="javascript:void(0)" target="_blank" title="">Services</a><br>
<a href="javascript:void(0)" target="_blank" title="">Contact</a>

</div></details></nav>

Answer 2

单击切换链接时，您似乎想要隐藏导航。如果是这样，我会做以下事情。请注意，您的<a>代码位于<li>代码之外，我已将其移至内部。

<nav id="nav">
 <ul>
  <li class="nav-item"><a href="#overview">Overview</a></li>
  <li class="nav-item"><a href="#amenities">Amenities</a></li>
  <li class="nav-item"><a href="#residences">Residences</a></li>
  <li class="nav-item"><a href="#neighborhood">Neighborhood</a></li>
  <li class="nav-item"><a href="#availability">Availability</a></li>
  <li class="nav-item"><a href="#contact">Contact</a></li>
  <li class="btn login"><a href="#" target="_blank">Login</a></li>
  <li class="nav0item"><a href="javascript:collapseNav();">Toggle</a></li>
 </ul>
</nav>

我会按ID而不是类进行定位，并将显示设置为无。

<script type="text/javascript">
function collapseNav() {
  document.getElementById('nav').style.display = "none";}
</script>

由于您的切换位于导航内的<li>，因此导航菜单（和切换）将在激活时隐藏。所以，我想再次展示它。例如，您可以在JS中添加此函数。

function showNav() {
  document.getElementById('nav').style.display = "block";}

然后在某处添加一个链接，供用户再次显示菜单。

<button onclick="showNav();" >Show Menu</button>

如果你走那条路，我也会默认隐藏“显示菜单”按钮，添加id="shownav" style="display: none;"最初隐藏它。然后让你的collapseNav函数也显示按钮：

document.getElementById('shownav').style.display = "block";

Answer 3

感谢您的回复。这就是我想要的：

<div class="thirds clearfix">
	
	<!-- one-third -->
	<div class="one-third mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird on a fence" />
		<h2>The Trainer</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button1">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
	<!-- one-third -->
	<div class="one-third one-third-second mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird eating" />
		<h2>Lessons</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button2">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
	<!-- one-third -->
	<div class="one-third one-third-fourth mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A cat" />
		<h2>Training</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button3">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
</div><!--/thirds-->

<!-- thirds -->
<div class="thirds clearfix">
	
	<!-- one-third -->
	<div class="one-third mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird on a fence" />
		<h2>The Trainer</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button1">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
	<!-- one-third -->
	<div class="one-third one-third-second mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A bird eating" />
		<h2>Lessons</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button2">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
	<!-- one-third -->
	<div class="one-third one-third-last mobile-collapse">
		<img src="http://29.media.tumblr.com/tumblr_lvh3v78jGD1r2lhkno1_500.jpg" alt="A cat" />
		<h2>Training</h2>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
		<div class="button3">
			<a href="google.com"><img src="http://i66.tinypic.com/33kakow.png"></a>
		</div>
	</div><!--/one-third-->
	
</div>

现在＆＃34;响应＆＃34;单击导航项或徽标时，类将被删除，因此导航将返回折叠模式。

单击链接时折叠响应导航

3 个答案: