CODEWITHSUNDEEP
javascriptjqueryhtmlcsshide
uniqezor
uniqezor

Reputation: 179

Hide jquery menu after click function

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!

Upvotes: 1

Views: 12579

Answers (6)

Dards
Dards

Reputation: 101

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

Upvotes: 0

user3518647
user3518647

Reputation: 16

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>

Upvotes: 0

Bellash
Bellash

Reputation: 8184

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

and you should add some css

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

Upvotes: 0

Arsen Ibragimov
Arsen Ibragimov

Reputation: 435

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

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

Upvotes: 1

Irvin Dominin
Irvin Dominin

Reputation: 30993

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/

Upvotes: 0

laaposto
laaposto

Reputation: 12213

hide() is working. Try:

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

DEMO

Upvotes: 1

Related Questions