링크를 클릭하면 메뉴가 닫힙니다.

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

가 이벤트를 트리거 할 수있는 유일한 방법처럼 보이는이 ID가 "풀"를 가진 요소에 onclick을 함께합니다. 어쩌면 모든 "a"요소에 대해 동일한 이벤트를 추가해야 할 수도 있습니다. "a"요소를보다 잘 제어하려면 각 요소에 id를 할당 할 수 있습니다.

예 (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 -->

0,123,763

Answer 3

메뉴 링크에는 이벤트가 없습니다.

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