menu don`t collapse after clicking link

Question

I have some bug problem with my collapse menu. When I click on some menu item when menu on mobile screen, menu don`t collapse.

JS CODE:

$(function() {  
    var pull = $('#pull');  
    menu = $('nav ul');  
    menuHeight = menu.height();  
    $(pull).on('click', function(e) {  
            e.preventDefault();  
            menu.slideToggle();
    });  
 });  
$(window).resize(function(){  
    var w = $(window).width();  
    if(w > 460 && menu.is(':hidden')) {  
       menu.removeAttr('style');  
    }  
});

HTML CODE:

<nav class="clearfix">  
    <ul class="clearfix">  
        <li><a href="#top">Top</a></li>  
        <li><a href="#about">About</a></li>  
        <li><a href="#sessions">Sessions</a></li>  
        <li><a href="#contact">Contact</a></li>
        <li><a href="login.html">Login</a></li>
        <li><a href="#" style="color:#43b3e0;">Menu 1</a></li>
        <li><a href="#" style="color:#43b3e0;">Menu 2</a></li>    
    </ul>  
    <a href="#" id="pull"><img style="width:30px; height:30px; margin-top:10px;" src="images/collapse.png"></a>
    <div class="logo">
        <img src="images/logo.png"> 
    </div> 
</nav>  

Answer 1

Looks like the only way to trigger the event is with the onclick on the element with the id "pull". Maybe you need to add the same event for every "a" element. In order to have more control over the "a" element, you can assign an id to each one.

Example(html):

<ul class="clearfix">  
    <li><a id="aTop" href="#top">Top</a></li>

Example(JS):

var link = $('#aTop');
.
.
.
$(link).on('click', function(e) {  
        e.preventDefault();  
        menu.slideToggle();
});  

Answer 2

check this link

http://jsfiddle.net/H3KRk/5/

 //$('.nav > ul').toggleClass('no-js js'); $('.nav .js ul').hide(); $(document).on("click", function(e) { var $elem = $(e.target); if ($elem.hasClass('clicker')) { $('.nav .js ul').not($elem.next('ul')).hide(); $elem.next("ul").slideToggle(); } else { $('.nav .js ul').hide(); } }); 

 .nav { width:1024px; margin:0px auto 0px auto; background: #757575; /* Old browsers */ background: -moz-linear-gradient(top, #757575 0%, #474747 47%, #111111 47%, #000000 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#757575), color-stop(47%,#474747), color-stop(47%,#111111), color-stop(100%,#000000)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* IE10+ */ background: linear-gradient(to bottom, #757575 0%,#474747 47%,#111111 47%,#000000 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#757575', endColorstr='#000000',GradientType=0 ); /* IE6-9 */ } .nav ul { margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; } .nav ul li { position:relative; display:inline; list-style:none; margin:0px 13px 0px 0px; padding:0px 0px 0px 0px; line-height:40px; cursor:pointer; } .nav ul li ul { position:absolute; left:0; right:0; width:1024px; padding:0px 0px 0px 0px; /*padding:14px 15px 14px 15px;*/ background:#f1f1f1; } .nav ul .clicker { background:none; } .nav ul .clicker:hover {} .nav ul li a { /*display:block; padding:8px 10px 8px 40px;*/ color:#ffffff; text-decoration:none; background:none; } .nav ul li a:hover { background:#F2F2F2; } .nav ul .active { background:#f00; } #contentHolder { padding:9px 13px 9px 13px; width:998px; background:#cccccc; } /* Fallbacks */ .nav .no-js ul { display:none; } /* .nav .no-js:hover ul { display:block; } */ .nav > .no-js > li:hover > ul { display:block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <div class="nav"> <ul class="no-js"> <li> <a class="clicker">Offers</a> <ul> <div id="contentHolder"> <li><a href="#">111</a></li> <li><a href="#">222</a></li> <li><a href="#">333</a></li> <li><a href="#">444</a></li> <li><a href="#">555</a></li> </div> </ul> </li> <li> <a class="clicker">Offers-2</a> <ul> <div id="contentHolder"> <li><a href="#">aaa</a></li> <li><a href="#">bbb</a></li> <li><a href="#">ccc</a></li> <li><a href="#">ddd</a></li> <li><a href="#">eee</a></li> </div> </ul> </li> <li><a class="clicker" href="#">All product</a></li> <li><a href="#" class="clicker">Glassworks/Artist</a></li> <li><a href="#" class="clicker">Series</a></li> <li><a href="#" class="clicker">Gift guide</a></li> <li><a href="#" class="clicker">About art glass</a></li> <li><a href="#" class="clicker">Outlet</a></li>--> </ul> </div><!-- end - nav --> 

Answer 3

You don't have any event on menu link.

$('nav ul li').on('click', 'a', function(){
    menu.slideToggle();
})