jquery - 具有相对位置句柄显示/隐藏的水平滑动面板 - jQuery

Question

我正在使用 this tutorial制作一个水平滑动的 div 面板，我成功了。顺便说一句，我担心 handle 说“信息”。我正在使用我的 div 加载联系表。所以在我的例子中，文本将是“联系我们”之类的。所以文本按钮会在边上占用很长的空间，在较小的分辨率下它可以隐藏一些文本。这就是为什么我也想隐藏句柄(类似于 this ，但以水平方式)。

我们可以选择以下两种方式中的任何一种:

选项1:面板左侧的 handle ，与显示/隐藏面板相对切换。
选项 2:两个 handle ，一个用于切换滑动面板，另一个用于切换文本 handle 。

我认为问题在于 CSS，如果处理不当，CSS 将无法满足我的要求。但是我对CSS一团糟。 :(

注意:我希望整个东西都在 right: 0 的固定位置，如图所示。

编辑

这是我的代码:

    <script type="text/javascript">
$(document).ready(function(){
    $(".trigger").click(function(){
        $(".panel").toggle("medium");
        $(this).toggleClass("active");
        return false;
    });
});
</script>
<style>
.panel{
    position: fixed;
    top: 109px;
    right: 0;
    display: none;
    background-color: #ededed;
    width: 300px;
    height: auto;
    padding: 1.25em;
    filter: alpha(opacity=85);
    opacity: .85;
}

a.trigger{
    position: fixed;
    top: 80px;
    right: 0;
    padding: 5px;
    color: #fff;
    display: block;
    background-color: #CDDD54;
}
</style>

<div class="panel">Panel content here</div> <!-- .panel -->
<a class="trigger" href="#">Contact us</a>

Answer 1

这适用于固定位置。 Fiddle .

CSS

.panel {
    width:300px;
    float:left;
    height:550px;
    background:#d9dada;
    position:fixed;
    left:-290px;
}

.slider-arrow {
    padding:5px;
    width:10px;
    float:left;
    background:#d9dada;
    font:400 12px Arial, Helvetica, sans-serif;
    color:#000;
    text-decoration:none;
    position:relative;
    left:0px;
}

HTML

<div class="panel"></div>
<a href="javascript:void(0);" class="slider-arrow show">&raquo;</a>

jQuery

$(function(){
    $('.slider-arrow').click(function(){
        if($(this).hasClass('show')) {
            $( ".slider-arrow, .panel" ).animate({
                left: "+=290"
            }, 700, function() {
                // Animation complete.
            });
            $(this).html('«').removeClass('show').addClass('hide');
        } else {    
            $( ".slider-arrow, .panel" ).animate({
                left: "-=290"
            }, 700, function() {
                // Animation complete.
            });
            $(this).html('»').removeClass('hide').addClass('show');    
        }
    });

});