menu don`t collapse после нажатия ссылки

Question

У меня проблема с ошибкой с моим меню свернуть. Когда я нажимаю на какой-либо пункт меню, когда меню на экране мобильного телефона, меню не рушится.

JS КОД:

$(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 КОД:

<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

Похоже, единственный способ, чтобы вызвать событие является с OnClick на элемент с идентификатором "тянуть". Возможно, вам нужно добавить одно и то же событие для каждого элемента «a». Чтобы иметь больший контроль над элементом «a», вы можете назначить идентификатор каждому из них.

Пример (HTML):

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

Пример (JS):

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

Answer 2

проверить это соединение

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; 
 
\t list-style:none; 
 
    margin:0px 13px 0px 0px; 
 
    padding:0px 0px 0px 0px; 
 
    line-height:40px; 
 
\t cursor:pointer; 
 
} 
 
.nav ul li ul { 
 
\t position:absolute; 
 
\t left:0; 
 
\t right:0; 
 
    width:1024px; 
 
    padding:0px 0px 0px 0px; 
 
    /*padding:14px 15px 14px 15px;*/ 
 
    background:#f1f1f1; 
 
} 
 
.nav ul .clicker { 
 
\t 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 { 
 
\t background:#f00; 
 
} 
 
#contentHolder { 
 
    padding:9px 13px 9px 13px; 
 
    width:998px; 
 
    background:#cccccc; 
 
} 
 

 
/* Fallbacks */ 
 
.nav .no-js ul { 
 
\t display:none; 
 
} 
 
/* 
 
.nav .no-js:hover ul { 
 
\t display:block; 
 
} 
 
*/ 
 
.nav > .no-js > li:hover > ul { 
 
\t display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
 
<div class="nav"> 
 
\t <ul class="no-js"> 
 
\t  <li> 
 
\t \t  <a class="clicker">Offers</a> 
 
\t \t \t <ul> 
 
       <div id="contentHolder"> 
 
\t \t \t \t  <li><a href="#">111</a></li> 
 
\t \t \t \t  <li><a href="#">222</a></li> 
 
\t \t \t \t  <li><a href="#">333</a></li> 
 
\t \t \t \t  <li><a href="#">444</a></li> 
 
\t \t \t   <li><a href="#">555</a></li> 
 
       </div> 
 
\t \t \t </ul> 
 
\t \t </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

У вас нет мероприятия по ссылке меню.

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