Question

我有以下HTML ..我想在加载时隐藏SIDEBAR div并使用HREF分隔符或图像切换它。实现此目的的最简单方法是什么？目前页面将显示侧边栏div，我可以使用链接切换它..但是我想根据状态将链接（或图像）更改为（打开/关闭）..

找到很多方法来实现这一点，使用幻灯片和滑动......只是侧面没有 -

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.left {float: left;}
.right {float: right;}
.hidden {display: none;}

#sidebar {
    display: none;
}
#content {
    background-color: #EFE;
    border-color: #CDC;
    width: 97%;
}

.use-sidebar #sidebar {
    display: block;
    width: 20%;
}

.sidebar-at-left #sidebar {margin-right: 1%;}
.sidebar-at-left #content, .use-sidebar.sidebar-at-right #sidebar, .sidebar-at-right #separator {float: right;}

#separator {
    display: block;
    outline: none;
    width: 10%;
}

</style>
</head>

<body>
<div class="use-sidebar sidebar-at-right" id="main">
    <div id="sidebar">Some HTML Poll Content Here</script></div>
    <a href="" id="separator">SHOW POLL</a>
    <div class="clearer">&nbsp;</div>
</div>


<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    // Variables
    var objMain = $('#main');
    // Show sidebar
    function showSidebar(){
        objMain.addClass('use-sidebar');
        objMain.addClass('sidebar-on');
    }
    // Hide sidebar
    function hideSidebar(){
    objMain.removeClass('use-sidebar');
    objMain.addClass('sidebar-off');
    }

    // Sidebar separator
    var objSeparator = $('#separator');
    objSeparator.click(function(e){
        e.preventDefault();
        if ( objMain.hasClass('use-sidebar') ){
            hideSidebar();
        }
        else {
            showSidebar();
        }
    }).css('height', objSeparator.parent().outerHeight() + 'px');
});
</script>
</body>
</html>

Answer 1

.slide（）效果只是.animate()的简写符号。

您可以创建自己的：http://jsfiddle.net/rkw79/2dgg8/2/

将“左”属性设置在视图范围之外，然后在单击时将其置于视图中。

$('input').toggle(function() {
    $('div').animate({
        left: '0px'
    });
    $(this).val('close');
}, function() {
    $('div').animate({
        left: '-150px'
    });
    $(this).val('open');
});

jQuery可折叠分区

1 个答案: