3

我正在使用 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-->
4

1 回答 1

3

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

于 2011-09-12T21:16:46.370 回答