제이쿼리 수정부탁드려요
본문
위 와같은 레이아웃의 홈페이지 코딩중인데요 우측에 숨김레이아웃이 있어서 버튼을 누르면 나오고
다시누르면 들어가는 방식으로 구글링해서 스크립트 찾아 코딩을 했습니다.
그런데 실제 원하는건 반대방식인 처음에는 오픈이고 누르면 오른쪽으로 슬라이드 되면서 히든처리되게
하고싶은데 도저희 제실력으로는 수정이 안되네요. 답변좀 부탁드립니다.
아래는 사용코드입니다.
<!--스크립트-->
$(document).ready(function() {
var openCheck = null;
function rightScrollOpen(selectNode) {
$('#rightscroll').append('<div><iframe src="' + $(selectNode).attr('href') + '" frameborder="0"></iframe><p><a href="javascript_:void(0);">Close</a></p></div>');
$('#rightscroll div p').css('margin-top', $(selectNode).position().top);
$('#rightscroll div p a').css({'height':$(selectNode).css('height'), 'background-image':$(selectNode).css('background-image')}).click(function() { rightScrollClose(selectNode); });
$(selectNode).css('visibility', 'hidden');
$('#rightscroll div').animate({right:'0px'}, 200, function() {
openCheck = selectNode;
addClickEvent();
});
}
function rightScrollClose(selectNode, opt) {
$('#rightscroll div').animate({right:'-135px'}, 200, function() {
$(selectNode).css('visibility', 'visible');
$('#rightscroll div').remove();
openCheck = null;
if(opt == undefined) addClickEvent();
});
}
function addClickEvent(opt) {
$('#rightscroll ul a').unbind('click');
if(opt == undefined) {
$('#rightscroll ul a').click(function() {
addClickEvent(true);
var iTimeout = 0;
if(openCheck != null) {
rightScrollClose(openCheck, false);
iTimeout = 600;
}
var _this = this;
setTimeout(function() { rightScrollOpen(_this); }, iTimeout);
return false;
});
}
else $('#rightscroll ul a').click(function() { return false; });
}
addClickEvent();
});
<!--스타일-->
/* Right Scroll */
#rightscroll ul {position:fixed; right:0; z-index:900; width:30px;height:100%;border-right:1px solid #dfdfdf}
#rightscroll ul li {width:100%;}
#rightscroll ul li:first-child {margin-top:350px;}
#rightscroll ul li a {display:block; width:100%; height:110px; text-indent:-9999px; background:url('/web/upload/gl_s_img/right_scroll_btn.jpg') no-repeat 0% 0%;}
#rightscroll div {position:fixed; right:-135px; z-index:800; width:167px; height:100%;}
#rightscroll div iframe {float:right; width:135px; height:100%;border-left:1px solid #dfdfdf}
#rightscroll div p {float:left; width:30px; margin-top:350px;}
#rightscroll div p a {display:block; width:100%; height:110px; text-indent:-9999px; background-repeat:no-repeat; background-position:0% 0%;}
<!--HTML-->
<div id="rightscroll">
<ul>
<li><a href="/right_scroll.html"></a></li>
</ul>
</div>
답변을 작성하시기 전에 로그인 해주세요.