问候!!!!
我的设计响应式遇到了麻烦,每个引用都运行良好,但是当我输入任何菜单选项时菜单保持打开状态,如下所示:
所以,我希望当我输入任何菜单选项时,它会自动关闭。
这是代码:
$(document).ready(main);
var contador = 1;
function main() {
$('.menu_bar').click(function() {
if (contador == 1) {
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
};
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<style>
@media screen and (max-width:800px) {
header nav {
width: 80%;
height: 100%;
margin: 0;
position: fixed;
left: -100%;
overflow: auto;
}
.menu_bar {
display: block;
width: 100%;
background: #ccc;
}
.menu_bar .bt-menu {
display: block;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #024959;
overflow: hidden;
font-size: 25px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.menu_bar span {
float: right;
font-size: 40px;
}
header nav ul li {
display: block;
float: none;
border-bottom: 1px solid rgba(255, 255, 255, .3);
}
}
</style>
<header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-list2"></span>Menu</a>
</div>
<nav>
<ul>
<li><a href="#"><span class="icon-house"></span>Inicio</a></li>
<li><a href="#"><span class="icon-suitcase"></span>Trabajos</a></li>
<li><a href="#"><span class="icon-rocket"></span>Proyectos</a></li>
<li><a href="#"><span class="icon-earth"></span>Servicios</a></li>
<li><a href="#"><span class="icon-mail"></span>Contactos</a></li>
</ul>
</nav>
</header>
所以,它正在发生,菜单响应正在工作,每个菜单选项的每个 href 都在同一页面上,我的意思是,我只有一个页面“index.html”和每个菜单选项,这些是指特定的“Id”,那么我该怎么办?为此,当您单击任何菜单选项时,它会找到单击的选项并自动关闭菜单。
答案 0 :(得分:1)
您只收听“.menu_bar”上的点击事件。 您应该为菜单上的项目添加一个事件侦听器,然后处理该事件,在您的情况下,隐藏菜单。
$(document).ready(main);
var contador = 1;
function main() {
$('.menu_bar').click(function() {
if (contador == 1) {
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
};
});
$('.menu-link').click(function() {
contador = 1;
$('nav').animate({ left: '-100%' });
});
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />
<style>
@media screen and (max-width:800px) {
header nav {
width: 80%;
height: 100%;
margin: 0;
position: fixed;
left: -100%;
overflow: auto;
}
.menu_bar {
display: block;
width: 100%;
background: #ccc;
}
.menu_bar .bt-menu {
display: block;
padding: 20px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #024959;
overflow: hidden;
font-size: 25px;
font-weight: bold;
color: #fff;
text-decoration: none;
}
.menu_bar span {
float: right;
font-size: 40px;
}
header nav ul li {
display: block;
float: none;
border-bottom: 1px solid rgba(255, 255, 255, .3);
}
}
</style>
<header>
<div class="menu_bar">
<a href="#" class="bt-menu"><span class="icon-list2"></span>Menu</a>
</div>
<nav>
<ul>
<li><a class="menu-link" href="#"><span class="icon-house"></span>Inicio</a></li>
<li><a class="menu-link" href="#"><span class="icon-suitcase"></span>Trabajos</a></li>
<li><a class="menu-link" href="#"><span class="icon-rocket"></span>Proyectos</a></li>
<li><a class="menu-link" href="#"><span class="icon-earth"></span>Servicios</a></li>
<li><a class="menu-link" href="#"><span class="icon-mail"></span>Contactos</a></li>
</ul>
</nav>
</header>