jQuery의 "slideUp"함수로 숨겨진 DIV를 인쇄 할 수 있습니까?

Question

H3 헤더 및 DIV 내용 상자 (각 H3 뒤에 DIV가 오는)의 목록을 포함하는 간단한 "아코디언"유형 페이지가 있습니다. 이 페이지에서 나는 숨겨진 모든 DIV를 시작합니다. H3을 클릭하면 바로 아래 (after)의 DIV가 jQuery의 "slideDown" 기능으로 표시되고 다른 모든 DIV는 "slideUp" 기능으로 숨겨집니다. 나 사용자가 페이지를 인쇄 할 때 확장 된 모든 div의를 표시 할 어떤 방법이 있는지로 (

style="display: none;" 

궁금 오전 :

은 "slideUp"함수는 지정된 된 DIV에 다음 인라인 스타일을 삽입 사용자가 자바 스크립트를 사용할 수없는 경우).

인라인 스타일이 항상 다른 스타일 선언보다 우선하기 때문에 불가능하다고 생각합니다.

다른 해결책이 있습니까?

솔루션

Sugendran's solution 큰 내가 지금까지 테스트 한 브라우저 (FF2, IE7과 IE6)에서 작동합니다. 나는 인라인 스타일을 오버라이드 할 방법이 없다는 것을 알지 못했다. 인라인 스타일은 이전에 찾은 것 같아서 알아내는 것이 좋다. 나는 또한 이것에 관해서 this answer here가있는 것을 안다. 검색이 여기를 탐색하는 것이 그렇게 어렵지 않았 으면 좋겠다 .--).

Lee Theobald's solution "slideUp"기능은 멋지지만 style = "display : none;"을 추가합니다. 비트.

My solution은 정상적으로 작동하지만! 중요한 선언이 작동하면 잔인합니다.

Answer 1

CSS에서! important 절을 사용할 수 있습니다. 이렇게하면 인라인 스타일이 무시됩니다.당신이 설정 인쇄 미디어 스타일 시트의 경우

그래서 - 당신이

div.accordian { display:block !important; } 

Answer 2

예. 부하에

은과 같이 모든 관련 된 DIV에 클래스 (예를 들어, "hideme")를 추가

$('div#accordion> div').addClass('hideme'); 

NB :이 자바 스크립트가 비활성화되었을 때 아코디언 잘 분해 것을 의미한다.

div.hideme { display: block; } 

: 인쇄 스타일이 같은 "hideme"클래스를 지정할 수 있지만

.hideme { display: none; } 

: 당신이 일반 스타일이 같은 "hideme"클래스를 지정할 수 있습니다 이런 식으로

다음으로 '클릭'기능에서 DIV를 위로 이동 한 다음 'hideme'클래스를 추가 한 다음 미끄러 진 각 DIV에서 '스타일'속성을 제거하면 각 H3에 추가됩니다.

<script type="text/javascript"> 
//<![CDATA[ 
    $(function() { 
     $('#accordion> div').addClass('hideme'); 

     $('#accordion> h3').click(function() { 
      $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast', function(){ $('#accordion> div:hidden').addClass('hideme').removeAttr('style'); }); 

     }); 
    }); 
//]]> 
</script> 

주 스타일과 클래스 변경이 DIV가 슬라이드 이동하고 jQuery를 추가 한 후 발생할 수 있도록 slideUp 기능의 함수 콜백을 포함 할 필요가 :

는

이에 대한 전체 jQuery를은 다음과 같습니다 "style = display : none;"

Answer 3

처럼 뭔가를 할 수 I이 다른 방법으로 할 개인적 것입니다. 인라인 스타일을 추가하는 JQuery 대신 클래스를 추가하지 않는 이유는 무엇입니까?

<div class="closed">...</div> 

그런 다음이 스타일 시트를 가질 수 있습니다 인쇄 화면을위한 하나, 하나

<link href="screen.css" rel="stylesheet" type="text/css" media="screen,projection"/> 
<link href="print.css" rel="stylesheet" type="text/css" media="print"/> 

당신의 screen.css에서 당신이 폐쇄 정의하는 것 ...

div.closed { display: none; } 

을 그러나 당신의 print.css에서는 그렇지 않을 것입니다. 이렇게하면 모든 div를 인쇄 할 때 확장되지만 화면에서는 닫힙니다.

Answer 4

{디스플레이 : 블록! 중요; } FF에서 작동하지만 어딘가에 그것은 ie6 함께 작동하지 않을 읽을. 인쇄용 자바 스크립트 이벤트가 있습니까? 나는 이전에 광범위하게보고 기억하고 하나를 찾을 수 없었습니다, 이것이 존재하지 않는다는 것이 제멋대로 보입니다. js는 브라우저 내부에서 어떤 일이 일어날지를 알고있는 것 같습니다. 그러나 어떤 이유에서든 인쇄에 눈이 멀었습니다 : (

브렌트 내부의 모든 div를 커버한다 아코디언 내부의 모든 요소의 블록으로 표시 '메이커 mimoYmima.com

Answer 5

@

#accordion > *{ display:block !important; }