Question

我的折叠菜单有一些bug问题。当我在手机屏幕上点击某个菜单项时，菜单不会崩溃。

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

看起来触发事件的唯一方法是使用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/

＆＃13;

//$('.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();
    }
});

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 3

您在菜单链接上没有任何活动。

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

单击链接后，菜单不会崩溃

3 个答案: