2012-05-23 4 views
0

아코디언 UI에서 빈 항목에 문제가 있습니다.jQuery 아코디언 UI 빈 항목 문제.

세 섹션이 있습니다.

+ Section 1 
+ Section 2 (empty) 
+ Section 3 

HTML

<div id="accordion"> 
    <h3>Section 1</h3> 
    <div>content 1</div> 
    <h3>Section 2 (empty)</h3> 
    <div></div> 
    <h3>Section 3</h3> 
    <div>content 3</div> 
</div> 

jQuery를

$(function() { 
    $("#accordion").accordion({ 
     autoHeight: false, 
     active: false, 
     collapsible: true,  
    }); 
});​ 

예 : http://jsfiddle.net/ty5ZH/

내가 다른 섹션을 클릭 비해 Section 2 온 클릭하면 아코디언을 작동하지 않습니다.

Section 2을 클릭하면 Section 2을 다시 클릭하면 다른 섹션을 클릭하면 everythigs가 정상적으로 작동합니다.

jQuery UI 아코디언 버그가 있습니까?

답변

1

은 당신도 열리지 섹션을 중지하려면,이 대답은 당신이 필요로 수정 될 수 있습니다

https://stackoverflow.com/a/4672074/750593 나는 그것의 http://jsfiddle.net/cchana/ty5ZH/2/이 작업 JS 바이올린을 만들었습니다. 클래스 나 ID를 추가하여 열지 않으려는 섹션을 식별 한 다음 accordian을 선언 한 직후에 다음을 실행해야합니다.

$('.disable').addClass("ui-state-disabled"); 
var accordion = $("#accordion").data("accordion"); 
    accordion._std_clickHandler = accordion._clickHandler; 
    accordion._clickHandler = function(event, target) { 
    var clicked = $(event.currentTarget || target); 
    if (! clicked.hasClass("ui-state-disabled")) 
     this._std_clickHandler(event, target); 
    }; 
+0

예. 예. 그게 다예요. 고맙습니다. 내 변경 : 자동으로 비어있는 항목을 선택하여 사용 중지합니다. http://jsfiddle.net/ty5ZH/5/ – kubedan

1

이것은 테마 문제입니다. 이 문제를 일으키는 jQuery UI CSS 테마 파일 중 하나를 참조하는 것을 잊었습니다.

업데이트 된 바이올린 here을 찾을 수 있습니다.

1

여기 다른 해결책이 있습니다. beforeActivate 메서드를 사용하면 비어있는 경우 확장되지 않습니다.

$('#accordion').accordion({ 
    autoHeight: false,            
    collapsible: true, 
    active: false, 
    beforeActivate: function(event, ui) { 
     if (ui.newPanel.length>0 && ui.newPanel.text()==""){ 
      event.preventDefault(); 
     } 
    } 
}); 
+0

위의 beforeActivate 함수를 사용하면 비어있는 섹션의 클릭 및 확장 동작을 방지하는 데 도움이됩니다. 고맙습니다. –

0

이 조합을 사용하면 정상적으로 작동합니다.

$(".selector").accordion({ 
    heightStyle: "content" 
});