3

ページの下部にあるナビゲーション メニューに jQuery.toggle と .animate を使用しています。nav は 2 つの div で構成され、1 つは外側のコンテナー、もう 1 つはナビゲーション ボタンなどを保持する内側のコンテナーです。

私が達成しようとしているのは; ナビゲーションをクリックすると、その位置が上にアニメーション表示されます。ナビゲーションを閉じるには、もう一度クリックするだけで、アニメーションでページの下部にある元の位置に戻ります。

私が抱えている問題は、ナビゲーション ボタンをクリックしても何も起こらないことです。ブラウザのステータス バーにターゲット 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
    });

});

これにより、toggle メソッドの効果が得られますが、子要素の 1 つをクリックしても、#navInner div.

それでも をアニメートしたい場合は#navInner div、次の行を削除してください。

if(e.target != this) return;

（ただし、それらはリンクであり、別のページに移動するため、アニメーション化する#navInner div必要があるとは思えません）

于 2011-09-12T21:16:46.370 に答える