테스트 사이트 - 개발 중인 베타 버전입니다

버튼으로 열고 닫을수있는 우측 메뉴 질문좀 드릴께요~!

티에스 8년 전 조회 2,352

아래 그림 처럼 쇼핑몰 메인페이지에서 우측으로 열고 닫을수있는 메뉴가 있는데요~

이게 자꾸 자동으로 열리고 닫혀서 계속 열려있게 하고 버튼을 누르면 닫을수 있도록 하는방법이 있을까요? 


 


/* 우측 메뉴 */

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개

8년 전

전체 소스를 못봐서 그러는데

아래처럼만 해줘도 되지 않을까 싶습니다.

</p><p><span style="white-space:pre">	</span>/* 우측 메뉴 */</p><p>//<span style="white-space:pre">	</span>var openQuick = setTimeout( function() { classie.toggle ( UIF_RightArea , 'RightOpen' ); }, 3000 );</p><p>//<span style="white-space:pre">	</span>var closeQuick = setTimeout( function() { classie.toggle ( UIF_RightArea , 'RightOpen' ); }, 5000 );</p><p><span style="white-space:pre">	</span>$( ".RightAreaBtn" ).click( function(){ </p><p>//<span style="white-space:pre">			</span>clearTimeout(openQuick);</p><p>//<span style="white-space:pre">			</span>clearTimeout(closeQuick);</p><p><span style="white-space:pre">			</span>classie.toggle( UIF_RightArea , 'RightOpen' );</p><p><span style="white-space:pre">	</span>});</p><p>

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

티에스
8년 전
감사합니다~!

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인