Question

我有以下代码，在它下面可以上下切换。但是如何让面板左右切换？我希望SLide Panel在关闭时显示在边缘，并在打开时显示在扩展侧

这样的东西，但在左边而不是在顶部。 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>

Answer 1

确保包含jQuery和jQueryUI。 Here是我的榜样：

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

Answer 2

可能需要更多关于您正在寻找什么的信息。

但这可能会对你有所帮助： http://jsfiddle.net/anJVs/1/

这里的主要区别是：

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

你在寻找类似的东西吗？

如何使面板左/右切换？

2 个答案: