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

div 이동관련 질문드립니다... 채택완료

서잰션 5년 전 조회 1,780

</p>

<p><div class="left_div" id="left_div" style="    width:30%;     height:90%;float:left;    margin-left:0.5%;margin-top:2.5%;     position:absolute;    left:0px;    top:10px;     z-index: 3;"></p>

<p> </p>

<p><button type='button' class="control_btn" id="control_btn"><i class="fa fa-tags" aria-hidden="true"></i></button>

            <script>

                    $( '.control_btn' ).click( function() {

                      $( '.left_div' ).toggleClass( 'ab' );

                      $( '.top_right').toggleClass('ab');

                      $( '.down-right').toggleClass('ab');

                      

                      $('.left_div.ab').css('margin-left','69%');

            });    

            </script>

            <style>

                .left_div {

                    background-color:#f00;

                    margin-left:0.5%;

                }

                .left_div.ab{

                    background-color:#eeeeee;

                }

            </style></p>

<p> </p>

<p>

 

제가 원하는 것은 버튼을 누르면 다시 되돌아 오는거 까지를 하고싶은데 색깔만 변하게 되더라고요...

 

어떻게 수정을 해야 할 지 알려주시면 감사하겠습니다..

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

답변 1개

채택된 답변
+20 포인트
5년 전

</p>

<p><code>$(</code><code>'.left_div.ab'</code><code>).css(</code><code>'margin-left'</code><code>,</code><code>'69%'</code><code>);</code></p>

<p><font face="monospace"><span style="font-size: 11.699999809265137px;">==> // 위에 행을 아래처럼 바꾸세요</span></font></p>

<p><font face="monospace"><span style="font-size: 11.699999809265137px;">var left = </span></font><code>$(</code><code>'.left_div.ab'</code><code>).css(</code><code>'margin-left'</code><code>);</code></p>

<p><font face="monospace"><span style="font-size: 11.699999809265137px;">var leftMargin = '69%'</span></font><code>;</code></p>

<p><code>if (left === '69%') {</code></p>

<p><code>   leftMargin = '</code><code>0%'</code><code>; // 원래값</code></p>

<p><code>} </code></p>

<p><code>$(</code><code>'.left_div.ab'</code><code>).css(</code><code>'margin-left', leftMargin</code><code>);</code></p>

<p>

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

답변에 대한 댓글 3개

서잰션
5년 전
http://wnghks2516.cafe24.com/gnuboard5/bbs/code_view.php?mb_id=admin&wr_id=1&wr_1=1

해당 페이지에 적용을 시켜봤는데 아직까지 되돌아오지 않습니다;;
백수1995
5년 전
확인해보니까
margin-left 값이 타이밍 문제로 제대로 못가져 오고 크로스 브라우징에 문제가 있네요

default.css 에 class 를 추가하고
left_margin_69:{margin-left: '69%'}

$( '.left_div.ab').toggleClass('left_margin_69');

이런식으로 바꾸세요
서잰션
5년 전
감사합니다. 이제야 원하는 방향으로 이동이 되네요!

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

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

로그인