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主题文件。

您会找到更新的小提琴here。

Answer 2

如果您想要暂停该部分甚至打开，此答案可能是您需要的修补程序：https://stackoverflow.com/a/4672074/750593

我创建了一个JS小提琴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"
});

jQuery Accordion UI空项目问题。

4 个答案: