I have a simple function to show a dropdown menu.
This is a responsive menu, it only works with defined sizes on my media queries, that's why I want to hide submenu after click.
I want to click on one of the links and then this dropdown menu hides. I am aware of .hide() but I can't get it to work.
Any help?
I want to keep this code simple & clean.
HTML
<nav>
<ul class="navigation">
<img src="img/menu.png" alt="mobile" width="50" height="50"/>
<li class="n1"><a href="#home">Principal</a></li>
<li class="n2"><a href="#services">Serviços</a></li>
<li class="n3"><a href="#team">Equipa</a></li>
<li class="n4"><a href="#contact">Contactos</a></li>
</ul>
<span>Euclides Style | 965648044</span>
</nav>
Javascript
$("nav").click(function () {
$(".navigation").toggleClass('open');
});
UPDATE
I used a simple solution:
$(".navigation a").click(function () {
$(".navigation").removeClass('open');
});
Thanks everyone for your help!
I have a simple function to show a dropdown menu.
This is a responsive menu, it only works with defined sizes on my media queries, that's why I want to hide submenu after click.
I want to click on one of the links and then this dropdown menu hides. I am aware of .hide() but I can't get it to work.
Any help?
I want to keep this code simple & clean.
HTML
<nav>
<ul class="navigation">
<img src="img/menu.png" alt="mobile" width="50" height="50"/>
<li class="n1"><a href="#home">Principal</a></li>
<li class="n2"><a href="#services">Serviços</a></li>
<li class="n3"><a href="#team">Equipa</a></li>
<li class="n4"><a href="#contact">Contactos</a></li>
</ul>
<span>Euclides Style | 965648044</span>
</nav>
Javascript
$("nav").click(function () {
$(".navigation").toggleClass('open');
});
UPDATE
I used a simple solution:
$(".navigation a").click(function () {
$(".navigation").removeClass('open');
});
Thanks everyone for your help!
Share Improve this question edited Apr 10, 2014 at 10:52 uniqezor asked Apr 10, 2014 at 10:35 uniqezoruniqezor 1791 gold badge6 silver badges17 bronze badges 1- Show us the HTML also – laaposto Commented Apr 10, 2014 at 10:36
6 Answers
Reset to default 1hide() is working.
Try:
$("nav li").click(function () {
$(".navigation").hide();
});
DEMO
$("a").on("click", function (e) {
e.preventDefault();
$(".navigation").fadeOut();
});
or you can try .hide() even .fadeOut();
Assuming that open class has display: none or display: block attribute (it depends on the starting state) will work fine.
Alternatively you can use toggle function.
Demo: http://jsfiddle/IrvinDominin/uQg2X/
$("nav").click(function () {
$(".navigation").toggleClass('open');
});
and you should add some css
.navigation{ display:'none'}
.navigation.open{display:'block'}
First: it is not allowed to have a img-tag directly inside ul-tag. This is an example of a working code with some modifications:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hiding/showing navigation</title>
<style>
.closed{
display: none;
}
</style>
<script src="http://code.jquery./jquery-latest.js"></script>
<script>
$(function(){
$("nav").click(function(){
$(".navigation").toggleClass('closed');
});
});
</script>
</head>
<body>
<nav>
<h1>The nav</h1>
<ul class="navigation">
<li class="n1"><a href="#home">Principal</a></li>
<li class="n2"><a href="#services">Serviços</a></li>
<li class="n3"><a href="#team">Equipa</a></li>
<li class="n4"><a href="#contact">Contactos</a></li>
</ul>
<span>Euclides Style | 965648044</span>
</nav>
</body>
</html>
The hide(); solution will totally hide the menu and will not show again the next time, the toggle solution will toggle all the other menus on the page, so here below is my solution, this effect will apply to all your dropdown menus on a page.
$(document).on("click",".dropdown-menu li a", function(){
jQuery(this).parent('li').parent('ul').parent('div').removeClass('open');
});