Question

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

我想要实现的是;你点击导航，它的位置动画，关闭导航，你只需再次点击它，它会动画回到它在页面底部的原始位置。

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

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是否需要）

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

1 个答案: