I'm writting a dropdown menu and I wanted to have the dropdown being controlled by javascript.
My dropdown has the sub menu hidden of sight max-height: 0px; and when the correspondent anchor tag is clicked, I change its max-height parameter to 400px, using the following function:
function drop_down(name) {
document.getElementById(name).style.maxHeight = "400px";
}
So far so good. The problem is that the element's max-height, stays at 400px and the sub menu does not hide. So I thought that I should target the click of the mouse and when this happens check if there is any element with 400px and change it back to 0.
$('html').click(function() {
var max_h = document.getElementsByClassName("nav_content");
var i;
for(i = 0 ; i < max_h.length ; i++)
{
if(max_h[i].style.maxHeight == "400px")
{
max_h[i].style.maxHeight = "0px";
}
}
});
What happens is that this function tracks every click, even the one used to display the sub menu. So my question is: is there a way to only activate the second function after I clicked my sub-menu? Because I always want the click that es after the menu is displayed to close the sub menu.
HTML:
<body>
<div class="nav_container">
<nav class="nav_main">
<div class="logo">
<a href="#">
<img src="../majo.png" alt="logo">
</a>
</div>
<ul class="nav" id="nav">
<li>
<a href="user_menu.php" class="nav_item">Home</a>
</li>
<li>
<a href="#" class="nav_item" onclick="drop_down('nav_consul')">Consultas</a>
<div id="nav_consul" class="nav_content">
<div class="nav_sub">
<ul>
<li>
<a href="consul/inf_dia_dia">Informação Dia a Dia</a>
</li>
<li>
<a href="consul/tot_men">Totais Mensais</a>
</li>
<li>
<a href="consul/cur_tar">Tarifário Atual da Rede</a>
</li>
<li>
<a href="consul/dat_esp">Data específica</a>
</li>
<li>
<a href="consul/sys_act">Atividade do Sistema</a>
</li>
<li>
<a href="consul/coimas">Coimas</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav_item" onclick="drop_down('nav_simul')">Simulações</a>
<div id="nav_simul" class="nav_content">
<div class="nav_sub">
<ul>
<li>
<a href="simul/add_simple_tar">Criar tarifa Simples</a>
</li>
<li>
<a href="simul/add_plex_tar">Criar tarifa Complexa</a>
</li>
<li>
<a href="simul/simular">Simular Nova Tarifa</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav_item" onclick="drop_down('nav_prefs')">Preferências</a>
<div id="nav_prefs" class="nav_content">
<div class="nav_sub">
<ul>
<li>
<a href="prefs/list_access">Lista de acessos</a>
</li>
<li>
<a href="prefs/alt_pass">Alterar Password</a>
</li>
<li>
<a href="prefs/alt_dados_conta">Alterar Dados de Conta</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="../log_out.php" class="nav_item">Log Out</a>
</li>
</ul>
</nav>
</div>
<div id="content_main">
</div>
<footer></footer>
<script src="../js/jQuery.js"></script>
<script src="../js/user_menu.js"></script>
<script src="../js/user_nav.js"></script>
<script src="../js/user_clear_sub_menu.js"></script>
</body>
I'm writting a dropdown menu and I wanted to have the dropdown being controlled by javascript.
My dropdown has the sub menu hidden of sight max-height: 0px; and when the correspondent anchor tag is clicked, I change its max-height parameter to 400px, using the following function:
function drop_down(name) {
document.getElementById(name).style.maxHeight = "400px";
}
So far so good. The problem is that the element's max-height, stays at 400px and the sub menu does not hide. So I thought that I should target the click of the mouse and when this happens check if there is any element with 400px and change it back to 0.
$('html').click(function() {
var max_h = document.getElementsByClassName("nav_content");
var i;
for(i = 0 ; i < max_h.length ; i++)
{
if(max_h[i].style.maxHeight == "400px")
{
max_h[i].style.maxHeight = "0px";
}
}
});
What happens is that this function tracks every click, even the one used to display the sub menu. So my question is: is there a way to only activate the second function after I clicked my sub-menu? Because I always want the click that es after the menu is displayed to close the sub menu.
HTML:
<body>
<div class="nav_container">
<nav class="nav_main">
<div class="logo">
<a href="#">
<img src="../majo.png" alt="logo">
</a>
</div>
<ul class="nav" id="nav">
<li>
<a href="user_menu.php" class="nav_item">Home</a>
</li>
<li>
<a href="#" class="nav_item" onclick="drop_down('nav_consul')">Consultas</a>
<div id="nav_consul" class="nav_content">
<div class="nav_sub">
<ul>
<li>
<a href="consul/inf_dia_dia">Informação Dia a Dia</a>
</li>
<li>
<a href="consul/tot_men">Totais Mensais</a>
</li>
<li>
<a href="consul/cur_tar">Tarifário Atual da Rede</a>
</li>
<li>
<a href="consul/dat_esp">Data específica</a>
</li>
<li>
<a href="consul/sys_act">Atividade do Sistema</a>
</li>
<li>
<a href="consul/coimas">Coimas</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav_item" onclick="drop_down('nav_simul')">Simulações</a>
<div id="nav_simul" class="nav_content">
<div class="nav_sub">
<ul>
<li>
<a href="simul/add_simple_tar">Criar tarifa Simples</a>
</li>
<li>
<a href="simul/add_plex_tar">Criar tarifa Complexa</a>
</li>
<li>
<a href="simul/simular">Simular Nova Tarifa</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="#" class="nav_item" onclick="drop_down('nav_prefs')">Preferências</a>
<div id="nav_prefs" class="nav_content">
<div class="nav_sub">
<ul>
<li>
<a href="prefs/list_access">Lista de acessos</a>
</li>
<li>
<a href="prefs/alt_pass">Alterar Password</a>
</li>
<li>
<a href="prefs/alt_dados_conta">Alterar Dados de Conta</a>
</li>
</ul>
</div>
</div>
</li>
<li>
<a href="../log_out.php" class="nav_item">Log Out</a>
</li>
</ul>
</nav>
</div>
<div id="content_main">
</div>
<footer></footer>
<script src="../js/jQuery.js"></script>
<script src="../js/user_menu.js"></script>
<script src="../js/user_nav.js"></script>
<script src="../js/user_clear_sub_menu.js"></script>
</body>
- Perhaps you could display the sub-menu items on hover instead of on click. This will prevent any confusion. – Tarun Commented Apr 20, 2015 at 11:33
- I don't want to use hover, because I want to test this in mobile devices as well. – Comum Commented Apr 20, 2015 at 11:35
- In mobile device you can have hover effect only after touch – Afsar Commented Apr 20, 2015 at 11:36
-
use
preventDefault()with your drop down. – cнŝdk Commented Apr 20, 2015 at 11:36 - 1 Could you show your markup please? – Markai Commented Apr 20, 2015 at 11:36
4 Answers
Reset to default 3Here is an easy solution:
Create the following CSS-Styles:
.nav_content.visible {
max-height: 400px;
}
.nav_content.invisible {
max-height: 0px;
}
Set the overflow property for your nav_content to hidden:
.nav_content{
overflow: hidden;
}
Now add the class invisible to your submenus, if you want them to be invisible by default (you can do this manually in the markup or by js code):
Manually e.g.:
<div id="nav_prefs" class="nav_content invisible">
or by code (after the elements have been loaded):
$(".nav_content").addClass("invisible);
Now, if you just need to adjust your drop_down function to toggle the element's invisible/visible class:
function drop_down(dropdownID){
$('#'+dropdownID).toggleClass("visible invisible");
}
UPDATE: To make all visible submenus disappear when clicked elsewhere use this piece of code, when the window is loaded:
$(document).on('click', function (e) {
if (!$(e.target).is('.nav_item') && !$(".nav_item").has(e.target).length !== 0) {
$('.nav_content.visible').toggleClass("visible invisible");
}
});
If you only want to have one submenu visible at a time, you can use this version of your drop_down function:
function drop_down(dropdownID) {
$('.nav_content.visible').toggleClass("visible invisible");
$('#' + dropdownID).toggleClass("visible invisible");
}
A working fiddle can be found here
EDIT: Since you used jQuery in your original code, I assumed the answer can use jQuery too
You'll want to create a click handler on your document, then check the target of the click. If the target of the click has a certain class, use the menu behavior. If not, or if it's a sub-menu, close the menu.
Here's a question with multiple examples:
How do I close menu on click and when the user clicks away?
Also, I'd remend not using max-height to hide and show. Since you're using jquery already, you could just use hide() and show().
One more thing: since you're using jquery already, you don't need to use these calls: document.getElementById(name). You can do a $("#yourId") or for document.getElementsByClassName("nav_content"); you can use $(".your-class")
It looks like you attached click event to entire document. I think you need to change only $('html').click(function() { to something like $('sub-menu-selector').click(function() { to
only activate the second function after I clicked my sub-menu
Aside to that, since it's only piece of jQuery and if you're not using it elsewhere, I would replace this with addEventListener and attachEvent, but maybe that's just me :)
In that case you can use jQuery.not() method to exclude the dropdown menu from your jQuery selection, here's what you need :
$('html').not(document.getElementsByClassName("nav_container")[0]).click(function() {
//As you can pass an element to it
You can also use the :not in your first selector like this:
$('html:not(div.nav_container))
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745113150a4611965.html
评论列表（0条）