jquery - jQuery Accordion UI 空项目问题。

Question

我对手风琴 UI 中的空项目有疑问。

我有 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

这是一个主题问题。您忘记引用导致问题的 jQuery UI CSS 主题文件之一。

你会在这里找到一个更新的小提琴。

Answer 2

如果您想阻止该部分甚至打开，这个答案可能是您需要的修复：https ://stackoverflow.com/a/4672074/750593

我创建了一个 JS fiddle http://jsfiddle.net/cchana/ty5ZH/2/它工作。您需要添加一个类或 ID 来识别您不想打开的部分，然后在声明您的手风琴后立即运行以下命令。

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