Jquery UI 중첩 아코디언의 문제. 헤더 옵션은 중첩 된 아코디언과 간섭합니다.

Question

Tl; dr : 간단한 설명을 위해 아래로 스크롤하십시오.

나는 약간 독특한 문제가 있다고 생각합니다. 무엇보다 먼저 나는 인터넷/구글 사이트를 살펴 보았습니다. 물론이 질문을 할 때 제안 사항도 포함되어있었습니다.

손으로 주제 위로 돌아가서 중첩 된 양이 동적으로 생성되는 아코디언의 중첩 된 시리즈를 생성 중입니다. 즉, 최하위 수준의 항목이 가질 수있는 부모의 수에 대해 설정된 제한이 없습니다. 따라서 '.acord1, .acord2, .acord3'등의 옵션이 없습니다.

문제가 있습니다. 아코디언의 헤더 중 일부는 하위 수준 항목이며 어린이가 없으며 아코디언이 붙어 있습니다.

아래 예제 html에는 앞에서 언급 한 항목을 제외하기 위해 사용하는 header: 옵션을 추가 할 때 문제가 발생하기 때문에 위의 항목이 포함되어 있지 않습니다. 어린이의 한 명이 클릭 할 때 그것을 닫습니다.

$(".acord").accordion({ 
    header: "h3:not(.item)", 
    heightStyle: "content", 
    active: false, 
    collapsible: true, 
}); 

<div class="acord"> 
    <h3>test1</h3> 
    <div class="acord"> 
     <h3>test2</h3> 
     <div>test2cont</div> 
    </div> 
    <h3 class="item">test3</h3> 
</div> 

이 경우 위의이 같은 작동하지 않습니다 중첩 아코디언과 헤더 옵션을 지정, tl;dr이었다

아래는 내가 최소한의 코드로 재현하는 관리 한 테스트 케이스입니다 자식 아코디언의 부모 (클릭)가 닫히고 닫힙니다.

Js Fiddle

해결책이 있습니까?

Answer 1

다음은 내가 관리하는 해결 방법입니다. 못 생겼지 만, 몇 가지 다른 것들을 통해 일을 끝내게됩니다. 누군가 아이콘과 패딩을 제거하고 jquery 아코디언 헤더의 기능을 클릭하는 것보다 더 좋은 아이디어가 있다면이 질문에 답하십시오. 그때까지 :

$(".acord").accordion({ 
    heightStyle: "content", 
    active: false, 
    collapsible: true, 
    changestart: function (event, ui) { 
     if ($(event.currentTarget).hasClass("item")) { 
      event.preventDefault(); 
      $(event.currentTarget).removeClass("ui-corner-top").addClass("ui-corner-all"); 
     } 
    } 
}); 

편집 :

$(".acord").accordion({ 
    header: "> h3:not(.item)", //this line 
    heightStyle: "content", 
    active: false, 
    collapsible: true 
}); 

다음 jQuery bug tracker에 걸쳐 사람들에게

덕분에,이 훨씬 더 나은 솔루션으로 해결되었다