Javascript jQuery可折叠div_Javascript_Jquery

Javascript jQuery可折叠div

javascript jquery

Javascript jQuery可折叠div,javascript,jquery,Javascript,Jquery,我有以下HTML。。我想在加载时隐藏侧边栏div，并用HREF分隔符或图像切换它。。实现这一点最简单的方法是什么？目前，页面将显示边栏div，我可以用链接切换它。。但是，我想根据状态将链接（或图像）更改为（打开/关闭）通过slideup和slidedown找到了很多实现这一点的方法。。只是从侧面看不到- <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .left {float: left;

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

通过slideup和slidedown找到了很多实现这一点的方法。。只是从侧面看不到-

<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>


.left{float:left；}
.right{float:right；}
.hidden{显示：无；}
#边栏{
显示：无；
}
#内容{
背景色：#EFE；
边框颜色：#CDC；
宽度：97%；
}
.使用侧边栏#侧边栏{
显示：块；
宽度：20%；
}
.左侧的边栏#边栏{右侧边距：1%；}
.sidebar位于左侧#内容，.use-sidebar.sidebar-at-right#sidebar，.sidebar位于右侧#分隔符{float:right；}
#分离器{
显示：块；
大纲：无；
宽度：10%；
}
这里有一些HTML投票内容
$（文档）.ready（函数（）{
//变数
var objMain=$（“#main”）；
//显示边栏
函数showSidebar（）{
addClass（'use-sidebar'）；
objMain.addClass（'sidebar-on'）；
}
//隐藏侧边栏
函数hideSidebar（）{
objMain.removeClass（'use-sidebar'）；
objMain.addClass（'sidebar-off'）；
}
//边栏分隔符
var objsepator=$（“#分隔符”）；
objSeparator.单击（函数（e）{
e、 预防默认值（）；
if（objMain.hasClass（'use-sidebar'））{
hideSidebar（）；
}
否则{
showSidebar（）；
}
}).css（'height'，objsepator.parent（）.outerHeight（）+'px'）；
});

的.slide（）效果只是简单的符号

您只需创建自己的：

将“left”属性设置在视图范围之外，然后单击将其放入视图中

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