如何使面板左/右切換？

-1

我有下面的代碼，它下面好好地切換。但我怎樣才能讓面板左右切換？我想要SLIDE面板在關閉時顯示邊緣，並在打開時顯示在擴展面上如何使面板左/右切換？

這樣的事情，但在左側，而不是在頂部。 http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

<script type="text/javascript"> 
$(document).ready(function(){ 

    $(".btn-slide").click(function(){ 
     $("#panel").slideToggle("slow"); 
     //$("#panel").slideToggle("slow", {direction: "left"}, 100); 
     $(this).toggleClass("active"); return false; 
    }); 


}); 
</script>

CSS

<style> 


/** left sliding panel **/ 

#panel { 
/** background: #754c24; */ 
    height: 500px; 
    display: none; 
} 
.slide { 
    margin: 0; 
    padding: 0; 
/* border-top: solid 4px #422410; */ 
    background: url(images/btn-slide.gif) no-repeat center top; 
} 
.btn-slide { 
    background: url(images/white-arrow.gif) no-repeat right -50px; 
    text-align: center; 
    width: 144px; 
    height: 31px; 
    padding: 10px 10px 0 0; 
    margin: 0 auto; 
/* display: block; color: #fff;*/ 
    font: bold 120%/100% Arial, Helvetica, sans-serif; 

    text-decoration: none; 
} 

</style>

的Html

<div id="panel"> 

content will be shown here. 

    </div> <!-- end Panel content--> 

    <div id="openCloseWrap"> 
    <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> 
    </div> 
</div>

來源

2013-04-29 user244394

這看起來有所幫助：http://stackoverflow.com/questions/521291/jquery-slide-left-and-show [jQuery的的slideToggle方向（HTTP的 – George 2013-04-29 20:49:07

可能重複：// stackoverflow.com/questions/6555781/jquery-slidetoggle-direction）。另見http://www.learningjquery.com/2009/02/slide-elements-in-different-directions – j08691 2013-04-29 20:50:24

它不是你所指的那個的重複，它們都沒有工作，也沒有被接受，這就是爲什麼我我正在尋找一個可以接受的解決方案，並且必須發佈這個。 – user244394 2013-04-29 20:51:51

一定要包含jQuery和jQueryUI。 Here是我的例子：

$("button").click(function() { 
    $('div').hide("slide", { 
    direction: "left" 
    }, 1000); 
});

來源

2013-04-29 21:03:02 George

是否可以讓按鈕左右滑動，就像這個webdesignerwall.com/demo/jquery/simple-slide-panel.html一樣，以便當它只關閉按鈕時可見。但是這是從左到右，而不是從上到下。 – user244394 2013-04-29 21:17:59

我更新了[jsFiddle]（http://jsfiddle.net/zJJDd/5/） – George 2013-04-29 21:46:56

可能需要你在找什麼確切一點的詳細信息。

但是，這可能會幫助您： http://jsfiddle.net/anJVs/1/

主要這裏的區別是：

$("#panel").animate({width: 'toggle'});

您正在尋找類似的東西？

來源

2013-04-29 20:59:44 russter

是可能的，讓按鈕左右滑動這樣的http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html，以便當它只關閉按鈕是可見的。 – user244394 2013-04-29 21:13:22

如何使面板左/右切換？

回答

相關問題