-1

我有以下代码，在它下面可以上下切换。但是我怎样才能让面板左右切换呢？我希望滑动面板在关闭时显示在边缘，并在打开时显示在展开侧

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

2 回答 2

2

一定要包括 jQuery 和 jQueryUI。这是我的例子：

$("button").click(function () {
  $('div').hide("slide", {
    direction: "left"
  }, 1000);
});
于 2013-04-29T21:03:02.697 回答
0

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

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

这里的主要区别是：

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

你在寻找类似的东西吗？

于 2013-04-29T20:59:44.113 回答