jQuery 접을 수있는 divs

다음 HTML이 있습니다.로드 할 때 사이드 바 div를 숨기고 HREF 구분 기호 또는 이미지로 전환하고 싶습니다.이 작업을 수행하는 가장 간단한 방법은 무엇입니까? 현재 페이지에 사이드 바 div가 표시되며 링크로 전환 할 수 있습니다 .. 그러나 상태에 따라 링크 (또는 이미지)를 (열기/닫기)로 변경하고 싶습니다.jQuery 접을 수있는 divs

이 사용하고 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>

출처

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

답변

관련 문제