在耗盡我的大腦和時間後，發現大多數第三方滑動面板應用程序並不能很好地支持跨瀏覽器。有人說他們這樣做，但是當你看看這些演示時，顯然不會。所以我所做的就是通過包含jquery.ui來複制項目，並簡單地在自己的功能中添加。
http://jqueryui.com/toggle/
我使用肘節，與選定的 「下降」。這模仿了從窗戶左側滑入。適用於IE7 +和Chrome。
我將我的div內容設置爲「position：fixed」;爲了我的目的，我喜歡這個，因爲我可以控制是否要進行覆蓋，或者是否希望我的內容被推送。
然後在那個div內容就緒的情況下，我可以添加一個jquery的「animate」函數，並將它滑動到我想要的任何位置。
https://api.jquery.com/animate/
隨着時間的推移，我會創造我自己的庫，它擊敗了其他人的儘可能少的CSS樣式越好。但現在，我只需要把我的東西包起來。
編輯：2014年6月17日 - 這是實施後，幾乎幾天我張貼的答案在這裏 這裏是我的代碼使用jQuery用戶界面來實現： 你要知道，Twitter的引導並不認同這一干擾代碼，因爲它現在純粹用作css。使用
組件：
- 一種用於切換的滑動按鈕，我給它一個id = 「鍵」。
- 一個div id爲面板= 「effectMenu」
- 這是負責菜單滑動和使用id = 「effectContent」 漸行漸遠
- 一個DIV面板（顯示旁邊effectMenu）
- 當菜單幻燈片和淡入淡出，這滑入空的空間
- 當菜單幻燈片和回報，這個幻燈片和允許菜單回來
- 使用id =「positionOfEffect」
- 用於確定隱藏的輸入框，其中內容應滑落到id =「didContentSlide」
- 一個隱藏的輸入框存放一個布爾值：真要是內容移動到新位置，否則爲假又回到原來的狀態
所以你得到的東西如T他：
<button type="button" id="button" class="btn btn-default btn-lg" />
<div class="row">
<div id="effectMenu" class="col-md-4">
...
</div>
<div id="effectContent" class="col-md-4">
...
</div>
</div>
<input id="positionOfEffect" type="hidden" />
<input id="didContentSlide" type="hidden" />
現在jQuery代碼：
$('body').on('click', '#button', function (e) {
e.preventDefault();
//position of the effect menu
var positionOfEffectMenu = $("#positionOfEffectMenu").val();
//gets the value of whether or not the content slide to the new position
//true if it did, false if it returned back to the original position
var didContentSlide = $("#didContentSlide").val();
//starting position of everything, capture the current state at this point
//this is the page load set up
if (positionOfEffectMenu == "") {
//mimic the behavior of md-col-4 (33.333333% of screen)
$("#positionOfEffect").val((($(".row").width() * 0.33333333)));
$("#didContentSlide").val(false);
positionOfEffectMenu = $("#positionOfEffectMenu").val();
didContentSlide = $("#didContentSlide").val();
}
/**
* How far we want the transition to occur for the sliding content.
* The divided by 2 means, we're only going to be moving half the
* distance of the menu's width while the menu disappears.
* In my page, this makes a very space-friendly behavior
* originally the menu is all the way to the far right, and I have content
* next to it if I'm bringing the menu out, I dont want the content
* page to swing all the way to where the menu is, I want it to move
* just a bit so that it can fill up the space and look good for the user
* to focus in on.
*/
positionOfEffect = parseFloat(positionOfEffectMenu)/2;
didContentSlide = didContentSlide == "true"; //turns string to bool value
//I disable my button as its sliding otherwise if the user frantically clicks
//it will intercept the positions and hijack the animation
//it gets re-enabled later in this code
var $elt = $(this).attr('disabled', true);
//begin the animation
//Now.. move the effect content to the new position
//or if it is already at the new position, move it back to where it was before
$("#effectContent").animate({
left: (!didContentSlide) ? "-=" + (positionOfEffect) + "px" : "+=" + (positionOfEffect) + "px"
}, 500, function() {
})
//as the content is going in, drop the effectMenu out of the page
//or if the content is going back out, bring the effectMenu into the page
.queue(function() {
$("#effectMenu").toggle("drop", {}, 500);
}).dequeue();
//this is for the button.. its re-enabled when everything stops moving
setTimeout(function() {
$elt.attr('disabled', false);
}, 500);
//update the value of whether or not the contents slid into the new position
didContentSlide = (!didContentSlide);
$("#didContentSlide").val(didContentSlide);
//override the defaults of the button
return false;
});
我在之前檢查過，但是當我在ie7上嘗試時，它非常古怪。此外，疊加並不是我想要的樣子。 – sksallaj