웹 사이트에서 아코디언을 here과 비슷한 모양으로 만들려고합니다. 그러나 아코디언을 클릭 할 때마다 드롭 다운되지 않고 대신 my_url # collapseOne (또는 내가 클릭 한 항목에 따라 2 ~ 3 개)에 연결됩니다. 그리고 웹 페이지를로드 할 때 메뉴 1은 이미 삭제되었으며 (바람직하지 않음) 다른 두 개는 올바르게 표시됩니다.트위터 부트 스트랩 아코디언
아코디언 효과를 올바르게 구현하는 방법에 대한 아이디어가 있으십니까?
그래서 문서가 준비되면
을해야 할 두 가지가있다, 당신은 당신의 아코디언을 초기화해야합니다. 즉, 모든 아코디언 컨테이너를 통과하고 닫힌 상태로 초기화됩니다.
아코디언을 열거 나 닫는 링크에 클릭 이벤트 처리기를 연결합니다. 이러한 링크를 따르는 브라우저를 방지하려면 이벤트 처리기에서 false를 반환해야 이벤트가 더 이상 버블 링되지 않습니다. 그러면 브라우저가 링크를 따라 가지 않게됩니다.
플러그인이 수행 했으므로 그렇게하지 않아도됩니다. 아코디언을 초기화해야하지만 모든 태그를 활성화하거나 'data-toggle = "collapse"마크 업을 사용하여 자바 스크립트가 필요하지 않습니다. [doc] (http : // twitter. github.com/bootstrap/javascript.html#collapse). – Sherbrow
OP는 일을하기 때문에 OP가 맞춤형 아코디언을 만들려고한다는 것이 내 가정이었습니다. 포함 된 예제는 요청 된 모든 것을 수행합니다. 아마도 일부 소스 코드를 보는 것이 좋을 것입니다. –
죄송합니다, 저는 웹 디자인에 대해 많이 모른다. 게시 한 마크 업을 코드에 삽입하고 결과를 설명했습니다. 나는 마크 업에서 어떤 것이 유용 할 지 확신하지 못했다. 또한 '#collapseNumber'가 추가 된 URL로 리디렉션되는 것이 이상하다는 것을 알았습니다. 이전에 제 코드에는 해시 태그가있는 HREF 인 페이지에서 나중에 링크되는 맨 위에 메뉴가 있습니다. – user1253952
. 부트 스트랩 설치를 사용자 정의한 경우 필요한 파일이 있는지 확인하십시오. 애셋 파이프 라인과 함께 twitter-bootstrap-rails gem을 사용하는 경우 해당 코드를 삭제하고 제대로 작동하는지 확인하는 것이 좋습니다.
필요한 파일이 있습니다. [This] (http://i.imgur.com/1jwGB.png)는 내가 링크 한 사이트에 작성된 html을 끌어다 놓을 때처럼 보입니다. 또한 그것들을 클릭하면 페이지가 링크됩니다. 즉, url + '#collapseNumber'로 이동합니다. – user1253952
마크 업을 표시하면 마크 업없이 어디서 잘못 될지 조언 할 수 없습니다 – ncremins
[doc] (http://twitter.github.com/bootstrap/)의 지침에 따라 시작할 수 있습니다. javascript.html # collapse), jQuery와 플러그인 파일이 포함되어 있는지 확인하는 것을 잊지 마십시오. – Sherbrow
마크 업은 내가 코드에 붙여 넣은 마크 업입니다. 내 코드는 꽤 길지만 다른 부분이 어떤 것인지 확실하지 않았습니다. 나는 그것이 URL + '# collapseNumber'에 링크 된 이유에 대해 가장 혼란 스럽다고 생각합니다. 클릭하면 페이지가 그 위치로 스크롤됩니다. 내가 할 수 있다고 생각할 수있는 유일한 이유는 코드에서 이전에 클릭 할 수있는 최상위 메뉴가 있으며 해시 태그가있는 외부 참조로 연결되기 때문입니다. [약간 업데이트 된 마크 업] (http://jsfiddle.net/gqe7g/244/), 도움이되는지 확실하지 않습니다. – user1253952