トグルされアニメーション化されたアンカーリンクはもうナビゲートされません

Question

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

私が達成しようとしていることは、 navをクリックすると、その位置がアニメートされ、navを閉じるには、もう一度クリックするだけで元の位置に戻ります。

ナビゲーションボタンをクリックしても何も起こらないという問題は、ブラウザのステータスバーにターゲットURLが表示されていても、リンクする必要はありません。

はここa link

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

問題がであると思われます関数の場合、.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が必要であるが）