사용자가 이미지를 클릭 할 때 jQuery/JS를 사용하여 오버플로 : 숨겨진 컨텐츠를 표시하는 방법은 무엇입니까?

나는 피드 리더를 구축 중이며 첫 번째 페이지에는 많은 미리보기가 표시됩니다. 사용자는 제목을 클릭하고 소스 링크를 방문 할 수 있습니다.사용자가 이미지를 클릭 할 때 jQuery/JS를 사용하여 오버플로 : 숨겨진 컨텐츠를 표시하는 방법은 무엇입니까?

또한 내 페이지의 나머지 미리보기를 보려면 더하기 기호 +과 같은 작은 아이콘을 클릭 할 수있는 옵션을 제공하고 싶습니다.

http://jsfiddle.net/BLUzJ/에서 볼 수 있듯이 게시 미리보기의 내용이 이보다 많을 경우 max-height 및 overflow:hidden으로 설정했습니다. 게시물 미리보기의 95 %는 숨겨진 텍스트가 많습니다.

는 지금 최대 높이가 포스트 (내가 게시물 미리보기의 구석에있을 것 같아요)의 아이콘을 클릭하면,

#text { 
    max-height:10.3em; 
    overflow:hidden; 
}

아래로 된 Max를 10.3em로 설정 높이를 변경하여 사용자가 나머지를 읽을 수 있도록합니다.

내 응용 프로그램은 PHP로 작성되었으며 RSS 피드의 제목, 이미지, 컨텐츠를 얻습니다. 이것이 jQuery, JavaScript 솔루션이라고 생각하지만 어떻게해야할지 모르겠다.

아이디어와 사례를 제공해 주셔서 감사합니다.

출처

2011-09-21 Jeksiliki

, jQuery를 사용하여 : 당신의 아이콘이 될 max-height 을 제거 #text.expanded에 대한

추가 CSS 규칙 수 클래스 .toggle에 요소를 추가

http://jsfiddle.net/r4F8Q/3/
jquery는 요소에서 expanded 클래스를 추가/제거합니다. #text

출처

2011-09-21 20:06:34

멋진데! 여러분이 눈치 채 셨던 것처럼 많은'

...

'을 가질 것입니다. 이것이 #text를 사용한다는 사실에 어떻게 영향을 미치나요? – Jeksiliki

아, 그러면 클래스를 사용해야합니다. 페이지 당 #id 중 하나만 있어야합니다. 그러나 jquery 체인의 경우 ... .closest()는 가장 가까운 일치하는 조상 (http://api.jquery.com/closest/)을 제공하므로'# text' 만 가져옵니다. '의 부모.토글 (toggle) '- 다른 것은 없습니다. –

... 클릭 된'.toggle '의 부모를 명확히하기 위해. –

게시물의 모든 콘텐츠를 표시하려면 아이콘이 클릭 된 요소의 max-height을 자동으로 설정할 수 있습니다. 당신이 (document.getElementById("id")를 사용하거나 DOM을 통과하여 중 하나)를 확장하고자하는 요소의 보류를 얻을 후에는 수행하여이 속성을 설정할 수 있습니다 다음

이

x.style.maxHeight = "none";

당신은 onclick 이벤트로이 설정할 수 있습니다 원하는 경우 확장 아이콘을 클릭합니다. 확장에 애니메이션 효과를 적용하지 않습니다. jQuery와 같은 것을 사용해야한다.

EDIT : 제목을 클릭하면 펼쳐지는 jsFiddle이 간단한 예제로 업데이트되었습니다. http://jsfiddle.net/BLUzJ/6/

출처

2011-09-21 19:49:57

더 나은 이해를 위해 jsFiddle을 업데이트하면 정말 도움이 될 것입니다 ... – Jeksiliki

여기에 시작하는 바이올린입니다. 텍스트를 클릭하면 펼쳐집니다. 섹션을 확장/축소하는 트리거를 사용하려면 분명히 더 많은 작업을 수행해야합니다. 당신이 태그를 추가하기 때문에

http://jsfiddle.net/BLUzJ/10/

출처

2011-09-21 19:56:14 BNL

사용자가 이미지를 클릭 할 때 jQuery/JS를 사용하여 오버플로 : 숨겨진 컨텐츠를 표시하는 방법은 무엇입니까?

답변

관련 문제