토글 메뉴 문제

Question

토글 메뉴가 있습니다. 코드 및 기능은 http://jsfiddle.net/Wp2em/41/을 참조하십시오.

동일한 코드를 사용하는 실제 사이트에서 h3 (카테고리 1, 2 & 3이 순간적으로 태그 임)을 클릭 할 때마다 하위 메뉴가 약간 아래로 전환되고 페이지가 변경됩니다 새 h3 연결 페이지로 이동하고 하위 메뉴가 새 페이지에서 함께 축소됩니다.

상위 페이지/새 h3 연결 페이지가 열려있을 때 하위 메뉴가 열리도록 말할 수있는 방법이 있는지 궁금합니다. 내 토글 메뉴를 원하면 사이드 바 효과가있는 bank site을보십시오.

미리 감사드립니다.

Answer 1

여기 내 fiddle

당신이해야 할 모든 당신이 현재하고 메뉴가 페이지가로드 한 후 열려 있어야 리튬의 클래스 "currentPage를"가됩니다. 나는 또한 당신의 CSS를 옮겨서 조금 더 부드럽게 움직여야한다.

** 피들 코드가 업데이트되었습니다. 이제 현재 URL을보고 해당 URL과 일치하는 링크를 currentPage로 설정합니다. 또한 다른 메뉴를 열면 다른 부모 메뉴를 클릭하면 자동으로 닫힙니다.

* * 바이올린 코드가 업데이트되었습니다. 이제 메뉴가 확장되고 은행 사이트와 같은 링크로 이동하지 않는 화살표를 클릭하면됩니다.또한 모든 부모 H3에 앵커 태그를 두어야 할 위치를 변경했습니다.

Answer 2

페이지가로드되고 하위 메뉴 (ul.second_level)가 생성되면 (예 : PHP에서) 표시되어야하는 하위 메뉴에서 active css 클래스를 구문 분석합니다.

ul.active { 
    display: block 
} 

ul.second_level { 
    display: none 
} 

이것은 클릭 기능에 추가됩니다. 애니메이션을 시작한 후에는 클릭 이벤트를 발생시키지 마십시오 (원하지 않는다고 가정).

업데이트 :

그것은 아주 기본적인 것들이지만, 나는 당신의 메뉴의 HTML 코드 작성 방법을 모르겠어요. PHP 및 데이터베이스 (예 :)를 사용하여 메뉴를 만들 경우 현재 사용중인 페이지로 모든 하위 메뉴 항목을 선택하십시오. 페이지가 하위 메뉴의 페이지 중 하나 인 경우 해당 하위 메뉴에서 '활성'클래스를 설정하십시오. CSS는 나머지 작업을 수행합니다 (이 하위 메뉴를 표시하고 다른 하위 메뉴를 숨김).

정적 페이지가있는 경우 javacript를 사용하여 현재 페이지가 window.location.href인지 확인하십시오. 나머지는 같습니다.

Answer 3

너무 간단하지 않습니다. 나는 동일한 URL에 페이지를 다시 게시하고 있었지만 공개 된 H3의 ID 목록을 저장하기 위해 숨겨진 필드를 사용하여 매우 비슷한 문제가있었습니다.

새로운 페이지로 곧바로 이동할 때 쿠키를 사용해야합니다. 쿠키를 생성하고 H3을 열 때마다 값을 설정하고 쿠키를 닫을 때마다 쿠키를 제거하는 것이 아이디어입니다. 이 작업을 수행하려면 this plugin을 사용할 수 있습니다. 그런 다음 다른 페이지를 열면 스크립트는 쿠키에서 열려야하는 H3을 읽고 읽습니다.

또 다른 방법은 Ajax를 사용하여 세션 데이터에 저장 한 H3 정보를 다시 서버에 게시하고이를 사용하여 새 페이지의 HTML을 빌드하여 올바른 H3이 열려 있도록하는 것입니다.