css onclick/unclick 변경

다른 DIV의 클릭/언 클릭으로 DIV의 여백을 변경하려고합니다. css onclick/unclick 변경

지금이 바로 유무 :

$(document).ready(function(){ 
    $(".model_drop_pane").hide(); 
    $(".show-hide").click(function() { 
     if ($("#body_machine_novideo").css('margin-top', '50px')) { 
      $("#body_machine_novideo").css('margin-top', '300px'); 
      $(".model_drop_pane").slideToggle(); 
     } else { 
      $("#body_machine_novideo").css('margin-top', '50px'); 
      $(".model_drop_pane").slideToggle(); 
    } 
    }); 
});

아이디어는 다음 .show 숨기기 DIV의 클릭시에, #body_machine_novideo DIV는 50에서 300 픽셀로 margin-top의 변화, 또한 .model_drop_pane DIV가 전환됩니다. 이 부분은 작동합니다.

문제는 다음 .show 숨기기 DIV를 두 번 ("unclicking")를 클릭시에, .model_drop_pane DIV는의 #body_machine_novideo DIV의 그러나 여백 값이 50 픽셀, 그리고 유물로 다시 재설정되지 않습니다해야한다로 전환 300px.

A working demo of the problem can be found here. 로고 바로 아래의 Equipment : Chemical Mixing Stand 링크를 클릭하십시오.

출처

2012-12-19 Graham T

는 어느로 인해 콘솔에 오류가있을 것 같다 귀하의 경우 조건

if ($("#body_machine_novideo").css('margin-top', '50px')) 
// This part is always true. 
// You are not comparing the values in the first place

if (parseInt($("#body_machine_novideo").css('margin-top'),10) === 50)

OR 또한

if (+$("#body_machine_novideo").css('margin-top') === 50)

로 변경

나머지 부분 코드는 실행되지 않을 수 있습니다 ..

개체 [개체 개체]있는 방법 'fancybox'

출처

2012-12-19 18:14:37

당신은 .toggleClass() 방법을 사용하여 전환 클래스를 $("#body_machine_novideo").css('margin-top')의 값을 비교,하지만 당신이 정말로해야 할 것은있다가 없습니다 .

여분의 여백을 추가하려면 class을 만들어야합니다. 프리젠 테이션 문제는 CSS에 맡기고 동작이나 JavaScript에 대한 상호 작용은 그대로 둡니다. 나중에 margin-bottom의 값을 변경해야하는 경우 스타일 시트를 변경하면 JavaScript가 여전히 예상대로 작동합니다.

// JavaScript 
$(".show-hide").click(function(event) { 
    $("#body_machine_novideo").toggleClass('more'); 
    $(".model_drop_pane").slideToggle(); 
    event.preventDefault(); // Added: prevent the clicking event to execute normally 
});

그리고 당신의 CSS :

/* CSS */ 
#body_machine_novideo { margin-top:50px; } 
#body_machine_novideo.more { margin-top:300px; }

출처

2012-12-19 18:14:49

가보기를 변경하려면 상태를 검사, 당신의 상태를 파악하는 것을보기를 검사하지 않습니다.

즉, JS에 CSS를 넣지 마십시오. 인라인 스타일을 검사하여 스타일을 설정했는지 확인한 다음 repsonse에서 하드 코딩 된 CSS 값을 입력하십시오. 요소에 특정 클래스가 있는지 여부는 상태 인입니다. CSS는 특정 클래스를 특정 방식으로 렌더링합니다.

CSS

#body_machine_novideo { 
    margin-top: 50px; 
} 

#body_machine_novideo.open { 
    margin-top: 300px; 
}

$(document).ready(function(){ 
    $(".model_drop_pane").hide(); 
    $(".show-hide").click(function() { 
     $("#body_machine_novideo").toggleClass('open'); 
     $(".model_drop_pane").slideToggle(); 
    }); 
});

입니다 얼마나 청소기를 참조하십시오?

출처

2012-12-19 18:19:38

css onclick/unclick 변경

답변

관련 문제