单击 link 时折叠响应式导航
Collapse responsive nav when clicking link
我正在尝试让我的响应式导航在单击导航项 (link) 时折叠。
这是我的导航:
<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>
我不确定您为什么要将旧学校列表标签与现代导航混合使用,因为您不需要它们。
如果您希望菜单在选择时折叠,您可以使用这个巧妙的技巧:
<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>
您似乎想在点击开关 link 时隐藏导航。如果是这样,我将执行以下操作。请注意,您的 <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 而不是 class 定位,并将显示设置为 none。
<script type="text/javascript">
function collapseNav() {
document.getElementById('nav').style.display = "none";}
</script>
由于您的切换开关位于导航内的 <li>
上,因此您的导航菜单(和切换开关)将在激活时隐藏。所以,我想办法再次展示它。例如,您可以在您的 JS 中添加此功能。
function showNav() {
document.getElementById('nav').style.display = "block";}
然后在某处添加一个 link 供用户再次显示菜单。
<button onclick="showNav();" >Show Menu</button>
如果你走那条路,我也会默认隐藏“显示菜单”按钮,方法是添加 id="shownav" style="display: none;"
以最初隐藏它。然后让你的 collapseNav 函数也显示按钮:
document.getElementById('shownav').style.display = "block";
感谢您的回复。
这就是我要找的:
$(document).ready(function(){
$("li.nav-item a, .logo").click(function(){
$("nav").removeClass("responsive");
});
});
现在 "responsive" class 在单击导航项或徽标时会被删除,因此我的导航 returns 进入折叠模式。
我正在尝试让我的响应式导航在单击导航项 (link) 时折叠。
这是我的导航:
<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>
我不确定您为什么要将旧学校列表标签与现代导航混合使用,因为您不需要它们。
如果您希望菜单在选择时折叠,您可以使用这个巧妙的技巧:
<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>
您似乎想在点击开关 link 时隐藏导航。如果是这样,我将执行以下操作。请注意,您的 <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 而不是 class 定位,并将显示设置为 none。
<script type="text/javascript">
function collapseNav() {
document.getElementById('nav').style.display = "none";}
</script>
由于您的切换开关位于导航内的 <li>
上,因此您的导航菜单(和切换开关)将在激活时隐藏。所以,我想办法再次展示它。例如,您可以在您的 JS 中添加此功能。
function showNav() {
document.getElementById('nav').style.display = "block";}
然后在某处添加一个 link 供用户再次显示菜单。
<button onclick="showNav();" >Show Menu</button>
如果你走那条路,我也会默认隐藏“显示菜单”按钮,方法是添加 id="shownav" style="display: none;"
以最初隐藏它。然后让你的 collapseNav 函数也显示按钮:
document.getElementById('shownav').style.display = "block";
感谢您的回复。 这就是我要找的:
$(document).ready(function(){
$("li.nav-item a, .logo").click(function(){
$("nav").removeClass("responsive");
});
});
现在 "responsive" class 在单击导航项或徽标时会被删除,因此我的导航 returns 进入折叠模式。