저는 과거에 다양한 HTML 전자 메일을 보내 왔으며 이와 관련된 꽤 큰 제한을 보았습니다. 정말 필요한 것은 표시/숨기기 기능이있는 영역을 가질 수있는 기능입니다. + 기호 또는 헤더를 클릭하여 전환 할 수 있습니다.HTML 전자 메일로 축소 가능 테이블 (Outlook 2007-2010)
나는 JS가 그림에서 벗어나고 있다고 생각하고있다. CSS가있을 수도있다. Outlook 2007에서 작동하기 만하면됩니다. 어떤 제안?
감사합니다.
:
은이 문서를 참조하십시오. 트릭은 두 번째 테이블을 볼 수 없도록 지정된 큰 높이의 td 셀로 구분 된 두 개의 테이블을 만드는 것입니다.표 1에는 쇼 링크가 있고 표 2에는 표시 할 내용이 있고 링크 숨기기를 제외하면 두 표는 모두 똑같은 중복입니다.
앵커 태그를 클릭하면 전자 메일이 두 번째 테이블에 지정된 위치로 이동합니다. 두 테이블의 내용은 상자 표시/숨기기를 제외하고는 동일하므로 상자를 전환하는 것과 같은 환상을 만들었습니다.
표시/숨기기 상자가 두 개 이상인 경우 더 많은 표를 만들어야합니다. 전자 메일은 실제로 길어 지지만 전환 효과는 Outlook에서 계속 작동합니다.
앵커 태그 :
<a href="#section1">Click here to show content</a>
<a name="section1"></a>
여기에 빠른 예제 : http://jsfiddle.net/mjcookson/nq3Re/
업데이트 의견을 : 또한, 귀하의 이메일이 전체 뷰포트를 기입하지 않을 수 있습니다, 그래서 테이블 간의 간격이 나타나지 않게하기 위해 사용된다이 두 번째 테이블은 첫 번째 테이블 바로 다음에 있습니다.
Outlook에서는이 작업을 수행 할 수 없습니다. 그것의 HTML 이메일 렌더링 엔진은 꽤 나쁘다. 나는 모바일 웹킷과 안드로이드 브라우저를 위해 그것을 한 것으로 보았다. 당신은 앵커 태그를 사용하여 Outlook에서이 작업을 수행 할 수 있습니다 http://coding.smashingmagazine.com/2011/08/18/from-monitor-to-mobile-optimizing-email-newsletters-with-css/
흥미로운 아이디어, 감사 마리사! 나는 두 번째 것을 보는 것을 피하기 위해 큰 높이를 갖는 마지막 td에 관해서는 100 % grok하지 않는다. 따라서 모든 테이블은 항상 표시되지만 기본적으로 이메일 주위를 돌아 다니고 있습니까? – Glinkot
네, 맞습니다. 이메일을 돌아 다니고 있습니다. 표 사이의 틈은 사용자가 아래로 스크롤하면 방금 읽은 동일한 내용의 다른 표를 즉시 보지 못하도록합니다. 예를 들어 답변이 업데이트되었습니다. – marissajmc
Outlook 2010에서 작동하지 않습니다. 모든 콘텐츠가 표시됩니다. 흥미롭게도 메모리 누수는 생성 된 대규모 전자 메일에서이를 사용할 때 발생합니다. – flux