0

I have problem with empty item(s) in accordion UI.

I have 3 sections.

+ 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,       
    });
});​

Example: http://jsfiddle.net/ty5ZH/

When I click on Section 2 an than click on other section, accordion doesn't work.

If I click on Section 2 an than click on Section 2 again a than click on other section everythigs works fine.

Is jQuery UI accordion bug?

4

4 に答える 4

1

これはテーマの問題です。問題の原因となっている jQuery UI CSS テーマ ファイルの 1 つを参照するのを忘れました。

更新されたフィドルはこちらにあります。

于 2012-05-23T08:49:50.967 に答える
1

ここに別の解決策があります。beforeActivate メソッドを使用して、空の場合に展開しないようにするだけです。

$('#accordion').accordion({
    autoHeight: false,                                               
    collapsible: true,
    active: false,
    beforeActivate: function( event, ui ) {
        if (ui.newPanel.length>0 && ui.newPanel.text()==""){
            event.preventDefault();
        }
    }
});
于 2014-07-16T10:33:47.150 に答える
1

セクションが開かないようにしたい場合は、この回答が必要な修正になる可能性があります: 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);
    };
于 2012-05-23T08:58:49.260 に答える
0

この組み合わせを使用すると、うまく機能します。

$( ".selector" ).accordion({
  heightStyle: "content"
});
于 2016-08-23T09:43:57.950 に答える