jQuery를 UI 아코디언 - 컨텐츠 패널

JQuery와 UI 아코디언의 마크 업이 모양에 사용하는 요소 ...jQuery를 UI 아코디언 - 컨텐츠 패널

<div id="accordion"> 

    <h3><a href="#">First header</a></h3> 
    <div>First content</div> 

    <h3><a href="#">Second header</a></h3> 
    <div>Second content</div> 

</div>

길고도 짧은 이야기, 난 메뉴에 대한 마크 업을 변경하는 방법 함께 일하는 것은 대부분 내 통제 밖입니다. 그것은 다음과 같습니다 ...

하위 메뉴가있는 경우 클래스를 첫 번째 수준의 목록 항목에 선택적으로 추가 할 수 있습니다. 위의 그림과 같이 "드롭"을 추가하고 아코디언을 이와 같이 설정했습니다 ...

$("#sidebar").accordion({ 
    header: 'li.drop' 
});

그 부분은 정상적으로 작동합니다. jQuery가 모든 아코디언 클래스를 가정으로 추가하는 것을 볼 수 있습니다. 문제는 스크립트가 머리글 바로 뒤에있는 div를 내용 패널로 사용할 것을 찾고 있다는 것입니다. 나는 해당 마크 업 부분을 제어 할 수 없으므로 div에 ul class="sub-menu"을 감쌀 수 없습니다. 어떤 요소를 내용 패널, 즉 "하위 메뉴"클래스와 함께 사용해야하는지 설정하는 방법을 알아 내려고합니다. 어떤 아이디어?

도움 주셔서 감사합니다.

출처

2012-06-07 Kirkland

아코디언이 div을 찾지 못했습니다. 헤더 다음 요소를 찾습니다.
그래서 주어진 마크 업을 후 처리 할 수 있습니다. 아코디언을 적용하기 전에이 코드를 삽입하십시오.

$("li.drop").each(function() { 
    $(this).after($(this).find(".sub-menu")); 
});

출처

2012-06-07 20:24:05 Smileek

감사합니다. 불행히도 그것은 문제를 해결하지 못했습니다. li.drop (핸들러) 외부로 ul.sub-menu를 이동 했으므로 핸들러 다음 요소가되었습니다. Chrome inspect를 사용하면 ul.sub-menu가 ui-accordion-content와 다른 모든 클래스를 가지고 있음을 알 수 있지만 핸들러를 클릭해도 작동하지 않습니다. 디스플레이 : 없음; 는 ul.sub-menu에 적용되지 않으며 핸들러의 UI 아이콘도 변경되지 않습니다. – Kirkland

그것은 나를 위해 작동하기 때문에 그것은 이상합니다 : http://jsfiddle.net/84JC6/ 어쩌면 그것은 CSS에서, 뭔가 기본 동작을 방해? – Smileek

나는 그것을 이해했다. 상충되는 JS 문제였습니다. Idon't는 당신의 코드를 실제로 필요로하지 않았다, 나는 단지 당신이 jQuery UI Accordion이 "헤더 다음 요소를 찾는다"라고 지적해야했다. 반드시 div가 아니어야한다. :) – Kirkland

jQuery를 UI 아코디언 - 컨텐츠 패널

답변

관련 문제