jQuery可摺疊的Divs

我有以下的HTML ..我想隱藏SIDEBAR div加載並用HREF分隔符或圖像切換它。什麼是最簡單的方法來實現這一點？目前該頁面將顯示側邊欄div，我可以切換它的鏈接..但是，我想改變鏈接（或圖片）到（打開/關閉）取決於狀態..jQuery可摺疊的Divs

找到很多方法實現這一目標使用效果基本show和了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>

來源

2011-11-08 patrick

的.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'); 
});

來源

2011-11-08 02:09:56 rkw

jQuery可摺疊的Divs

回答

相關問題