Question

我正在使用这个JS小提琴中的确切代码。 http://jsfiddle.net/9Le8X/2/

但是，我希望可折叠div在右侧而不是左侧运行，特别是在第一次加载时我只希望橙色方块显示在右侧。单击时，面板内容从右侧拉出。我似乎无法让它发挥作用。有什么想法吗？

HTML

<div id="slide-panel">
    <a href="#" class="btn btn-danger" id="opener"><i class="glyphicon glyphicon-align-justify"></i></a>
    Panel Content
</div>

CSS

#slide-panel {
    width:300px;
    height:300px;
    padding:10px;
    background:#eee;
    margin-left:-300px;
}
#opener {
    float:right;
    margin:-10px -50px 0px 0px;
    border-radius:0;
}

JS

$('#opener').on('click', function() {       
        var panel = $('#slide-panel');
        if (panel.hasClass("visible")) {
            panel.removeClass('visible').animate({'margin-left':'-300px'});
        } else {
            panel.addClass('visible').animate({'margin-left':'0px'});
        }   
        return false;   
    });

Answer 1

这是你更新的小提琴：http://jsfiddle.net/chrisfrisina/ng0r3nqy/

您应该将内容与汉堡包分开。

$('#opener').on('click', function() {       
    var panel = $('#slide-panel');
    if (panel.hasClass("visible")) {
        panel.removeClass('visible').animate({'left':'-300px'});
    } else {
        panel.addClass('visible').animate({'left':'0px'});
    }   
    return false;   
});

使折叠Div对齐而不是左对齐

1 个答案: