2013-04-29 4 views
-1

아래 코드가 있습니다. 위 아래로 잘 토글합니다. 하지만 어떻게 패널을 좌우로 토글 할 수 있습니까? 닫을 때 가장자리에 슬라이드 패널을 표시하고 열면 펼쳐진면에 표시합니다.왼쪽/오른쪽 패널 전환 방법?

위와 같지만 맨 위가 아닌 왼쪽에 표시하고 싶습니다. CSS

<style> 


/** left sliding panel **/ 

#panel { 
/** background: #754c24; */ 
    height: 500px; 
    display: none; 
} 
.slide { 
    margin: 0; 
    padding: 0; 
/* border-top: solid 4px #422410; */ 
    background: url(images/btn-slide.gif) no-repeat center top; 
} 
.btn-slide { 
    background: url(images/white-arrow.gif) no-repeat right -50px; 
    text-align: center; 
    width: 144px; 
    height: 31px; 
    padding: 10px 10px 0 0; 
    margin: 0 auto; 
/* display: block; color: #fff;*/ 
    font: bold 120%/100% Arial, Helvetica, sans-serif; 

    text-decoration: none; 
} 

</style> 

HTML을

<div id="panel"> 

content will be shown here. 

    </div> <!-- end Panel content--> 

    <div id="openCloseWrap"> 
    <p class="slide"><a href="#" class="btn-slide">Slide Panel</a></p> 
    </div> 
</div> 
+0

이 도움이 보인다 : Here 내 예입니다 http://stackoverflow.com/questions/521291/jquery-slide-left-and-show [JQuery와 slideToggle 방향 (HTTP의 – George

+0

가능한 중복 : // stackoverflow.com/questions/6555781/jquery-slidetoggle-direction). 또한보십시오 http://www.learningjquery.com/2009/02/slide-elements-in-different-directions – j08691

+0

그것의 사본 아닙니다 당신이 참조하고있는 그들의 아무도는 일하고 또한 받아 들여지지 않았다 thats 왜 나 수용 가능한 해결책을 찾고 이것을 게시해야했습니다. – user244394

답변

2

jQuery와 jQueryUI가 포함되어 있는지 확인하십시오.

$("button").click(function() { 
    $('div').hide("slide", { 
    direction: "left" 
    }, 1000); 
}); 
+0

버튼을 닫은 상태에서 버튼 만 볼 수 있도록이 webdesignerwall.com/demo/jquery/simple-slide-panel.html과 같이 왼쪽이나 오른쪽으로 슬라이드 할 수 있습니다. 그러나 이것은 위아래가 아니라 오른쪽으로 남겨집니다. – user244394

+0

나는 [jsFiddle] (http://jsfiddle.net/zJJDd/5/)을 업데이트했다. – George

0

http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html

<script type="text/javascript"> 
$(document).ready(function(){ 

    $(".btn-slide").click(function(){ 
     $("#panel").slideToggle("slow"); 
     //$("#panel").slideToggle("slow", {direction: "left"}, 100); 
     $(this).toggleClass("active"); return false; 
    }); 


}); 
</script> 

당신이 정확히 무엇을 찾고 있는지에 대해 좀 더 정보가 필요할 수 있습니다.

그러나 이것은 당신을 도울 수 있습니다 여기 http://jsfiddle.net/anJVs/1/

의 주요 차이점은 다음과 같습니다

$("#panel").animate({width: 'toggle'}); 

당신이 그런 식으로 뭔가를 찾고 계십니까?

+0

버튼이 왼쪽과 오른쪽으로 http://www.webdesignerwall.com/demo/jquery/simple-slide-panel.html과 같이 움직일 수 있으므로 버튼 만 닫으면 버튼이 보입니다. – user244394