如何使用jQuery和CSS編寫垂直抽屜

Question

我正在使用Ember.js中的抽屜組件。這裏是jsbin http://jsbin.com/wulija/8/edit

我要的是在開始的時候，它看起來像這樣

+---------------------------+ 
| A  B  C  | 
+---------------------------+ 
    ... other page content ... 

如果我點擊任何選項，對應的組件將顯示出來。抽屜滑下來揭示內容A，和重疊以下頁面的內容

+---------------------------+ 
| _A_ B  C  | 
+---------------------------+ 
|       | | click A, slide down to reveal content A 
| content A    | V following page content is covered by drawer 
+---------------------------+ 

然後如果我點擊B，含量朝從右向左，內容B幻燈片的幻燈片上，抽屜高度將根據內容B.

調整

+---------------------------+ 
| A _B_  C  | 
+---------------------------+ 
|       | | if content B has more content 
|       | | slide down further 
|nt A <--  <-- Content B | V 
|       | 
+---------------------------+ 

如果我點擊當前選擇的選項，抽屜靠近

+---------------------------+ 
| A _B_  C  | 
+---------------------------+ ^
           | close drawer 

我有幾個問題

• 我希望抽屜向下滑動內容大小。但是，如果我想要幻燈片左/右效果，所以我將所有內容設置爲position: absolute;，然後通過使用jquery添加transform: translate來移動。但是由此，抽屜根本不會擴展，因爲所有內容-X不佔用任何空間。 position: absolute;元素不能隱藏overflow-y: hidden;

• 每個內容-X具有不同的大小和它對數據的ajax請求，所以大小是未知的。因此，我不能擁有固定長度的抽屜，我寧願讓瀏覽器佈局引擎根據需要分配儘可能多的空間。但爲了這樣做，我需要content-X與position: static;，然後我將有3個內容垂直堆疊在一起。

Answer 1

有很多事情你必須做。我只是在這裏爲第一選擇。

$(document).ready(function() { 
 
    var show1 = false, 
 
     show2 = false, 
 
     show3 = false, 
 
     
 
     content1 = $('.btn-1'), 
 
     content2 = $('.btn-2'), 
 
     content3 = $('.btn-3'); 
 
    
 
    $('.content-placeholder').css("width", $(window).width()); 
 
    
 
    var w = $(window).width() + 30; 
 
    
 
    $(window).resize(function() { 
 
    w = $(window).width() + 30; 
 
    }); 
 
    
 
    function checkDrawer (shouldOpen) { 
 
    if (shouldOpen) { 
 
     $('.drawer-content').addClass('show'); 
 
    } else { 
 
     $('.drawer-content').removeClass('show'); 
 
    } 
 
    } 
 
    
 
    $('.btn-1').on('click', function() { 
 
    show1 = !show1; 
 
    show2 = false; 
 
    show3 = false; 
 
    checkDrawer(show1 || show2 || show3); 
 
    if($('.btn-1').hasClass("current")) 
 
     { 
 
     $('.main_content').slideUp(1000); 
 
     content1.removeClass('current'); 
 
     } 
 
    else 
 
     { 
 
     $('.main_content').slideDown(1000); 
 
     content1.addClass('current'); 
 
     } 
 
    $('.drawer-content').css('transform', 'translate(0, 0)'); 
 
    
 
    
 
    content2.removeClass('current'); 
 
    content3.removeClass('current'); 
 
    }); 
 
    
 
    $('.btn-2').on('click', function() { 
 
    show1 = false; 
 
    show2 = !show2; 
 
    show3 = false; 
 
    checkDrawer(show1 || show2 || show3); 
 
    
 
    
 
    
 
    $('.drawer-content').css('transform', 'translate(-' + w + 'px, 0)'); 
 
    
 
    
 
    content1.removeClass('current'); 
 
    
 
    content3.removeClass('current'); 
 
    
 
    }); 
 
    
 
    $('.btn-3').on('click', function() { 
 
    show1 = false; 
 
    show2 = false; 
 
    show3 = !show3; 
 
    checkDrawer(show1 || show2 || show3); 
 
    
 
    $('.drawer-content').css('transform', 'translate(-' + 2 * w + 'px, 0)'); 
 
    
 

 
    content1.removeClass('current'); 
 
    content2.removeClass('current'); 
 
    content3.addClass('current'); 
 
    }); 
 
});

.main_content{ 
 
    position:relative; 
 
    z-index:1; 
 
    display:none; 
 
} 
 

 
.drawer { 
 
    border: 1px solid green; 
 
    height: 100px; 
 
    position: fixed; 
 
    width: 100%; 
 
} 
 
.drawer-navbar { 
 
    width: 100%; 
 
} 
 
.drawer-content { 
 
    overflow-x: hidden; 
 
    transition: all 0.3s ease 0s; 
 
    width: 5000px; 
 
    position:relative; 
 
} 
 
.drawer-content.show { 
 
    max-height: 700px; 
 
} 
 
.content-placeholder { 
 
    border: 1px solid yellow; 
 
    float: left; 
 
    top: 90px; 
 
    
 
} 
 
.content-placeholder > div { 
 
    transition: all 0.5s ease 0s; 
 
} 
 
.content-placeholder.current { 
 
    border: 5px solid yellow; 
 
} 
 
.content-1 { 
 
    background-color: red; 
 
    height: 300px; 
 
} 
 
.content-2 { 
 
    background-color: green; 
 
    height: 200px; 
 
} 
 
.content-3 { 
 
    background-color: blue; 
 
    height: 100px; 
 
} 
 
.other-content { 
 
    position: relative; 
 
    top: 100px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
    <div class="drawer"> 
 
    <div class="drawer-navbar"> 
 
     <ul> 
 
     <li class="btn-1">1</li> 
 
     <li class="btn-2">2</li> 
 
     <li class="btn-3">3</li> 
 
     </ul> 
 
    </div> 
 
    
 
    <div class="main_content"> 
 
    <div class="drawer-content"> 
 
     <div class="content-placeholder"> 
 
     <div class="content-1"></div> 
 
     </div> 
 
     <div class="content-placeholder"> 
 
     <div class="content-2"></div> 
 
     </div> 
 
     <div class="content-placeholder"> 
 
     <div class="content-3"></div> 
 
     </div>  
 
    </div> 
 
    </div> 
 
    </div> 
 
    <div class="other-content"> 
 
    following web content......sadfa 
 
    sdfj 
 
    asdjf 
 
    sadjf 
 
    sadjf 
 
    jsad 
 
    fjklxzcjlkzxcjv;lkjslkdjfl;kjaskdljflksd 
 
    f 
 
    asdf 
 
    asd 
 
    f 
 
    adsf 
 
    asd 
 
    f 
 
    ads 
 
    fasd 
 
    f 
 
    asd 
 
    fasd 
 
    f 
 
    asd 
 
    fsad 
 
    f 
 
    adsf 
 
    asd 
 
    f 
 
    asdfasd 
 
    fasd 
 
    f 
 
    asdf 
 
    asd 
 
    fa 
 
    sdfa 
 
    sdjf 
 
    asdjf 
 
    aksdjfalskdjflkasdjflkjadslkjflkasf 
 
    
 
    </div>

希望這將有助於在你的方式繼續移動你想要什麼。

檢查Fiddle Here.