0

ナビゲートボタンをクリックしたときに、メインコンテナ（およびその中のすべて）をスライドさせて、下にナビゲーションメニューを表示しようとしています。もう一度クリックすると、コンテナdivがナビゲーションメニューの上に戻ります。モバイルデザインで人気を博しているのはUIです。

とにかく、FirefoxとIEでは問題なく動作しています。残念ながら、Chromeについても同じことは言えません。

http://jsfiddle.net/aXsWz/28/

$(document).ready(function() {

$('div#navNavigate').click(function(){
        $('div#navNavigateHide').show()
        $('div#navNavigate').hide()
        $('div#container').animate({'left':'+=120'});
});  

$('div#navNavigateHide').click(function(){
        $('div#navNavigate').show()
        $('div#navNavigateHide').hide()
        $('div#container').animate({'left':'-=120'});
    });
});

したがって、問題は、「nav」と「container」のdivが一緒に移動していないことです。

助けていただければ幸いです。ありがとう。

4

1 に答える 1

1

アップデート：：

ナビゲーションには固定位置ルールがあります。絶対に変更すると、アニメーションは正しく実行されます。

#nav {
  background:#222222;
  width:240px;
  height:45px;
  margin:0 auto;
  position:absolute;  <-- This was previously "fixed"
  top:0;
  z-index:10000;
}

実例： http： //jsfiddle.net/aXsWz/30/

この記事を見て、固定ポジショニングと絶対ポジショニングの違いを確認してください：http: //css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

問題は、移動するコンテナ内にトグルをネストしていることです。それらをリファクタリングしてそのコンテナーの外部に配置すると、問題なく機能します（ただし、このjsパターンにかなりの改善を加えることができます...）。

実例： http： //jsfiddle.net/aXsWz/29/

<div id='nav'>
    <div id='navNavigate'>
    </div>
    <div id='navNavigateHide'>
    </div>
</div>    

<div id='container'></div>
于 2012-11-01T02:37:39.910 に答える