Hide jquery menu after click function

Question

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!

Show us the HTML also

laaposto
– laaposto

2014-04-10 10:36:01 +00:00
Commented Apr 10, 2014 at 10:36 — laaposto
– laaposto, Commented Apr 10, 2014 at 10:36

laaposto · Accepted Answer · 2014-04-10 10:38:07Z

1

hide() is working. Try:

$("nav li").click(function () {
    $(".navigation").hide();
});

DEMO

answered Apr 10, 2014 at 10:38

laaposto

12.2k15 gold badges61 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zhu Over a year ago

can you please help me to fix this stackoverflow.com/questions/51552712/… @laaposto

Arsen Ibragimov · Accepted Answer · 2014-04-10 10:39:18Z

1

$("a").on("click", function (e) {
    e.preventDefault();
    $(".navigation").fadeOut();
});

or you can try .hide() even .fadeOut();

answered Apr 10, 2014 at 10:39

Arsen Ibragimov

4354 silver badges21 bronze badges

1 Comment

uniqezor Over a year ago

This removes all my ".navigation" but I edited it to ".navigation .open". Thanks

Irvin Dominin · Accepted Answer · 2014-04-10 10:39:16Z

0

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.net/IrvinDominin/uQg2X/

answered Apr 10, 2014 at 10:39

Irvin Dominin

31k9 gold badges83 silver badges114 bronze badges

1 Comment

Zhu Over a year ago

can you please help me to fix this stackoverflow.com/questions/51552712/… @IrvinDominin

Bellash · Accepted Answer · 2014-04-10 10:40:09Z

0

$("nav").click(function () {
   $(".navigation").toggleClass('open');
});

and you should add some css

   .navigation{ display:'none'}
   .navigation.open{display:'block'}

answered Apr 10, 2014 at 10:40

Bellash

8,2776 gold badges57 silver badges95 bronze badges

Comments

user3518647 · Accepted Answer · 2014-04-10 10:45:27Z

0

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.com/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>

answered Apr 10, 2014 at 10:45

user3518647

161 bronze badge

1 Comment

uniqezor Over a year ago

Since when its not allowed? It's used quite more often then you think. Anyways, thanks for your help

vezunchik · Accepted Answer · 2019-05-21 14:27:14Z

0

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');
});

edited May 21, 2019 at 14:27

vezunchik

3,7173 gold badges20 silver badges26 bronze badges

answered May 21, 2019 at 14:08

Dards

1011 silver badge5 bronze badges

Collectives™ on Stack Overflow

Hide jquery menu after click function

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related