如何使面板左/右切换？

问题描述：

我有下面的代码，它下面好好地切换。但我怎样才能让面板左右切换？我想要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>

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

可能重复：// *.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); 
});

是否可以让按钮左右滑动，就像这个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'});

您正在寻找类似的东西？

是可能的，让按钮左右滑动这样的http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html，以便当它只关闭按钮是可见的。 – user244394 2013-04-29 21:13:22

如何使面板左/右切换？

相关推荐