Question

我正在使用this tutorial生成一个水平滑动div面板，我成功了。顺便说一句，我担心句柄会说“信息”。我正在使用我的div加载联系表单。所以在我的情况下，文本将是“联系我们”或其他东西。所以文本按钮在侧面需要很长的空间，而在较小的res中它可以隐藏一些文本。这就是为什么我也想隐藏句柄（类似于this，但是以横向方式）。

我们可以选择以下两种方式之一：

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

jQuery Sliding panel

我认为问题是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('&laquo;').removeClass('show').addClass('hide');
        } else {    
            $( ".slider-arrow, .panel" ).animate({
                left: "-=290"
            }, 700, function() {
                // Animation complete.
            });
            $(this).html('&raquo;').removeClass('hide').addClass('show');    
        }
    });

});

Answer 2

是的，是使用本教程完成的：http://www.building58.com/examples/tabSlideOut.html

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.8.1"></script>
<script type="text/javascript" src="http://www.building58.com/examples/js/jquery.tabSlideOut.v1.3.js"/>
<script type="text/javascript">
        $(function(){
            $('.slide-out-div').tabSlideOut({
                tabHandle: '.handle',   //class of the element that will become your tab
                pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab, Optionally can be set using css
                imageHeight: '122px',   //height of tab image, Optionally can be set using css
                imageWidth: '40px',     //width of tab image, Optionally can be set using css
                tabLocation: 'right',   //side of screen where tab lives, top, right, bottom, or left
                speed: 500,             //speed of animation
                action: 'click',        //options: 'click' or 'hover', action to trigger animation
                topPos: '100px',        //position from the top/ use if tabLocation is left or right
                leftPos: '20px',        //position from left/ use if tabLocation is bottom or top
                fixedPosition: true //options: true makes it stick(fixed position) on scroll
            });

        });
        </script>

        <div class="slide-out-div">
            <a class="handle" href="#">Contact us</a>
            <p>slide content here</p>
        </div>

水平滑动面板与相对位置句柄显示/隐藏 - jQuery

修改

2 个答案: