div 이동관련 질문드립니다...
본문
<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
$('.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);
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');
이런식으로 바꾸세요
감사합니다. 이제야 원하는 방향으로 이동이 되네요!
답변을 작성하시기 전에 로그인 해주세요.
