2012-05-07 2 views
0

나는 Cloudania 시민 페이지의 효과를 복제하기 위해 노력하고있어, 여기 발견JQuery와 확장 및 축소

HTTP :

// cloudania.com/citizens/ 난 단지 기본적인 찾고 있어요 이미지를 클릭 할 때 펼치기 및 접기 효과.

webcloud에서 jQuery-Collapse를 사용하고 있지만 인라인 상태로 이미지를 가져올 수 없습니다.

그래서 나는

http://i.stack.imgur.com/Lva48.png

그런 다음 1을 클릭 상자 페이지를 열 때 다음과 같이 할 그것은 다음과 같다 : 당신의 도움

에 대한

http://i.stack.imgur.com/SSAfV.png

감사합니다

답변

6

숨길 정말 지루하지만, 당신이 일 간단한 더 나은 것입니다. 슬라이드 토글과 좋은 CSS를 사용 해보면 쉽게 얻을 수 있습니다. 슬라이드 토글에 대한 자세한 내용은 여기 http://api.jquery.com/slideToggle/에서 확인할 수 있습니다.

  1. 당신은
  2. 당신은 모두 7 개 내용 (1) 절대 위치에 다른 내용과 숨겨진/DISPALY 가질 필요는 콘텐츠 1 슬라이드-전환 할 각 상자의 onclick이 필요합니다 : 없음;
  3. 또한 각 상자에서 관련된 숨겨진 div를 표시해야합니다.
  4. 다른 행의 상자를 클릭 한 경우 열려있는 다른 content1을 슬라이드 토글하여 닫아야합니다.

심플.

+0

고마워요. 나는 지금 이것에 대한 내 머리를 얻으려고 노력하고있다! 건배 – user1379075

3

이것은 jquery에서 쉽게 나타납니다. div를 표시하려면 slideDown()을 사용하십시오.

http://api.jquery.com/slideDown/

그리고 slideUp()가 내가 jQuery의 사이트에가는 알고

+0

인라인 이미지는 전체 너비를 늘리면 인라인으로 유지되지만 주위를 둘러칩니다. – user1379075