超級菜單 - 根據點擊的鏈接向方向滑動面板？

Question

我正在創建一個“大型菜單”，其中包含可在導航下滑入和滑出的大面板。 我面臨的問題是如果所點擊的鏈接在當前可見鏈接之前或之后（例如，如果您單擊當前可見鏈接之后的鏈接，則當前面板應該滑落屏幕向左，新面板應從右側滑入）。 如果按順序單擊鏈接，它將按預期工作，但是當您開始單擊無序鏈接時，幻燈片方向會變得混亂。

 $('.navigation a').click(function(e) { e.preventDefault(); var prevPanel = $('.navigation a.active').attr('data-panel'); var currPanel = $(this).attr('data-panel'); $('.panel').removeClass('active'); if (currPanel > prevPanel) { $('.panel.panel-' + prevPanel).removeClass('active').css('left', '-100%'); $('.panel.panel-' + currPanel).addClass('active').css('left','0'); } else { $('.panel.panel-' + prevPanel).removeClass('active').css('left', '100%'); $('.panel.panel-' + currPanel).addClass('active').css('left','0'); } $('.navigation a').removeClass('active'); $(this).addClass('active'); }); 

 body,html { overflow:hidden; } .navigation { text-align:center; } .panel { width:100%; height:200px; position:absolute; left:100%; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .panel.active { left:0; } .panel-1 { background:red; } .panel-2 { background:green; } .panel-3 { background:blue; } .panel-4 { background:orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navigation"> <a href="#" data-panel="1" class="active">Panel 1</a> <a href="#" data-panel="2">Panel 2</a> <a href="#" data-panel="3">Panel 3</a> <a href="#" data-panel="4">Panel 4</a> </div> <div class="panel-container"> <div class="panel panel-1 active">Panel 1 content</div> <div class="panel panel-2">Panel 2 content</div> <div class="panel panel-3">Panel 3 content</div> <div class="panel panel-4">Panel 4 content</div> </div> 

Answer 1

您所要做的就是在執行滑入動畫之前重置定位。

 $('.navigation a').click(function(e) { e.preventDefault(); var prevPanel = $('.navigation a.active').attr('data-panel'); var currPanel = $(this).attr('data-panel'); $('.panel').removeClass('active'); if (currPanel > prevPanel) { $('.panel.panel-' + prevPanel).removeClass('active').css('left', '-100%'); $('.panel.panel-' + currPanel).addClass('active').css('left','0'); } else { $('.panel.panel-' + prevPanel).removeClass('active').css('left', '100%'); $('.panel.panel-' + currPanel).addClass('active').css('left','0'); } // reset positioning $(".panel:lt("+ (currPanel - 1) +")" ).css('left','-100%'); $(".panel:gt("+ (currPanel - 1) +")" ).css('left','100%'); // continue $('.navigation a').removeClass('active'); $(this).addClass('active'); }); 

 body,html { overflow:hidden; } .navigation { text-align:center; } .panel { width:100%; height:200px; position:absolute; left:100%; -webkit-transition: all .25s ease-in-out; -moz-transition: all .25s ease-in-out; -o-transition: all .25s ease-in-out; transition: all .25s ease-in-out; } .panel.active { left:0; } .panel-1 { background:red; } .panel-2 { background:green; } .panel-3 { background:blue; } .panel-4 { background:orange; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="navigation"> <a href="#" data-panel="1" class="active">Panel 1</a> <a href="#" data-panel="2">Panel 2</a> <a href="#" data-panel="3">Panel 3</a> <a href="#" data-panel="4">Panel 4</a> </div> <div class="panel-container"> <div class="panel panel-1 active">Panel 1 content</div> <div class="panel panel-2">Panel 2 content</div> <div class="panel panel-3">Panel 3 content</div> <div class="panel panel-4">Panel 4 content</div> </div>