切换和动画锚链接不再导航

Question

我使用 jQuery.toggle 和 .animate 作为位于页面底部的导航菜单。导航由两个 div 组成，一个作为外部容器，另一个作为包含导航按钮等的内部容器。

我想要实现的是；您单击导航，它的位置会向上移动，要关闭导航，您只需再次单击它，它就会以动画方式返回到页面底部的原始位置。

我遇到的问题是，当您单击导航按钮时，没有任何反应，即使浏览器状态栏显示目标 URL，它也不会像应有的那样将您带到链接。

这是链接

jQuery:

$('#navContainer').toggle(function() {
    $('#navInner').animate({
        bottom: '+=350'
    }, 400, 'swing', function() {
    });
}, function() {
    $('#navInner').animate({
        bottom: '-=350'
    }, 400, 'swing', function() {
    });
});

CSS:

#navContainer {
    background-color:#0FF;
    height:520px;
    margin:0px 0px 0px 60px;
    position:fixed;
    cursor:pointer;
    bottom: 0px;
}

#navInner {
    background:url(../images/appinstructions/nav2.png);
    background-repeat:no-repeat;
    width:638px;
    height:491px;
    position:absolute;
    bottom:-350px;
}

HTML:

<div id="navContainer">
    <div id="navInner">
        <a id="navhomeBtn" href="appInstuc.html"></a>  
        <a id="navhelpBtn" href="appInstuc.html"></a>
        <a id="geBtn" href="http://www.ge.com/" target="_blank"></a>
        <div id="pages">
            <a href="ipadApp1.html"><img src="images/appinstructions/page1.png" alt="page 1"   class="page"/></a>
            <a href="app1-1.html"><img src="images/appinstructions/page2.png" alt="page 2" class="page"/></a>
            <a href="appRoots.html"><img src="images/appinstructions/page3.png"  alt="page3"class="page"/></a>
        </div><!--close pages--> 
    </div><!--close navInner--> 
</div><!--close navContainer--> 

Answer 1

问题似乎出在 .toggle 函数上，如果您使用 .click 链接就可以工作。使用 .toggle 链接不起作用的原因是这些链接是 #navInner div 的子级，因此单击链接会触发 .toggle代码>事件。

我建议改为这样做：

var showing = false;
$('#navInner').click(function(e){

    if(e.target != this) return;

    // Work out which direction we're moving in
    var topValue = "";
    if(showing){
        topValue = "+=350";
    } else {
        topValue = "-=350";
    }   

    // Change the showing variable to opposite
    showing = !(showing);

    // Begin the animation
    $(this).animate({ 
        top: topValue
    }, 400, 'swing', function(){
        // Do nothing
    });

});

这将为您提供切换方法的效果，但如果您单击其中一个子元素，它不会为 #navInner div 设置动画。

如果您确实希望它仍然对 #navInner div 进行动画处理，只需删除以下行：（

if(e.target != this) return;

尽管因为它们是链接并将您带到不同的页面，所以我怀疑对 #navInner div 进行动画处理div 是需要的）