點擊鏈接后，菜單不會崩潰

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為“ pull”的元素的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; 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

菜單鏈接上沒有任何事件。

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