jQuery Accordion UI проблема с пустым элементом.

Question

У меня проблема с пустым элементом (-ами) в пользовательском интерфейсе аккордеона.

У меня есть 3 раздела.

+ 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, а затем нажмите на другой раздел, который отлично работает.

Является ли jQuery UI ошибкой аккордеона?

Answer 1

Если вы хотите, чтобы остановить участок от даже открытия, этот ответ может быть вам исправление: https://stackoverflow.com/a/4672074/750593

Я создал скрипку JS http://jsfiddle.net/cchana/ty5ZH/2/ этого работает. Вам нужно добавить класс или идентификатор, чтобы определить разделы, которые вы не хотите открывать, а затем запустить сразу после объявления вашего аккордеона.

$('.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); 
    }; 

Answer 2

Это проблема с тематикой. Вы забыли ссылаться на один из файлов темы jQuery UI CSS, что вызывает проблему.

Вы найдете обновленную скрипку here.

Answer 3

вот еще одно решение. вам просто нужно использовать метод beforeActivate, чтобы предотвратить его расширение, если оно пустое.

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

Answer 4

Используйте эту комбинацию, она будет работать нормально.

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