버튼으로 열고 닫을수있는 우측 메뉴 질문좀 드릴께요~!
본문
아래 그림 처럼 쇼핑몰 메인페이지에서 우측으로 열고 닫을수있는 메뉴가 있는데요~
이게 자꾸 자동으로 열리고 닫혀서 계속 열려있게 하고 버튼을 누르면 닫을수 있도록 하는방법이 있을까요?
/* 우측 메뉴 */
var openQuick = setTimeout( function() { classie.toggle ( UIF_RightArea , 'RightOpen' ); }, 3000 );
var closeQuick = setTimeout( function() { classie.toggle ( UIF_RightArea , 'RightOpen' ); }, 5000 );
$( ".RightAreaBtn" ).click( function(){
clearTimeout(openQuick);
clearTimeout(closeQuick);
classie.toggle( UIF_RightArea , 'RightOpen' );
});
/*************************************************/
/* 우측 메뉴 */
/*************************************************/
#UIF_RightArea { position:fixed; top:0; right:0; height:100%; width:180px; background:#ffffff; border-left:1px solid #EAEAEA; z-index:190; }
#UIF_RightArea {
visibility: visible;
-ms-transform: translate(95%, 0);
-moz-transform: translate3d(95%, 0, 0);
-o-transform: translate3d(95%, 0, 0);
-webkit-transform: translate3d(95%, 0, 0);
transform: translate3d(95%, 0, 0);
-moz-transition: all 0.5s;
-o-transition: all 0.5s;
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
#UIF_RightArea.RightOpen {
visibility: visible;
-ms-transform: translate(0, 0);
-moz-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
#UIF_RightArea .RightAreaBtn { position:absolute; display:block; width:20px; height:40px; top:calc(50% - 20px); left:-20px; background:#FF0000; color:#fff; cursor:pointer; border-radius:3px 0 0 3px; }
#UIF_RightArea .RightAreaBtn::before { display:block; height:40px; line-height:40px; font-size:20px; text-align:center; content: "\f104"; font-family:'FontAwesome'; }
#UIF_RightArea .RightAreaBtn:hover { background:#8041D9; box-shadow:-1px 1px 2px rgba(0,0,0,0.2); }
#UIF_RightArea.RightOpen .RightAreaBtn::before { content: "\f105"; font-family:'FontAwesome'; }
답변 1
전체 소스를 못봐서 그러는데
아래처럼만 해줘도 되지 않을까 싶습니다.
/* 우측 메뉴 */
// var openQuick = setTimeout( function() { classie.toggle ( UIF_RightArea , 'RightOpen' ); }, 3000 );
// var closeQuick = setTimeout( function() { classie.toggle ( UIF_RightArea , 'RightOpen' ); }, 5000 );
$( ".RightAreaBtn" ).click( function(){
// clearTimeout(openQuick);
// clearTimeout(closeQuick);
classie.toggle( UIF_RightArea , 'RightOpen' );
});