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

Copy
<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;">

 

<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>

 

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

 

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

답변 1개

채택된 답변
+20 포인트

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

==> // 위에 행을 아래처럼 바꾸세요

var left = $('.left_div.ab').css('margin-left');

var leftMargin = '69%';

if (left === '69%') {

   leftMargin = '0%'; // 원래값

} 

$('.left_div.ab').css('margin-left', leftMargin);
로그인 후 평가할 수 있습니다

답변에 대한 댓글 3개

http://wnghks2516.cafe24.com/gnuboard5/bbs/code_view.php?mb_id=admin&wr_id=1&wr_1=1

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

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

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

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

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

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

로그인
🐛 버그신고