jQuery Accordion UI空項目問題。

我在手風琴用戶界面中的空物品存在問題。jQuery Accordion 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再次點擊其他部分everythigs工作正常。

是jQuery UI手風琴錯誤？

來源

2012-05-23 kubedan

如果你想阻止甚至開放的部分，這個答案可能是你需要修復：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-23 08:58:49 cchana

是的。就是這樣。謝謝。我的更改：自動選擇空項目以禁用。 http://jsfiddle.net/ty5ZH/5/ – kubedan

這是一個主題問題。你忘了引用其中一個導致問題的jQuery UI CSS主題文件。

你會找到一個更新的小提琴here。

來源

2012-05-23 08:49:50

這裏是另一種解決方案。你只需要使用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-16 10:33:47

使用上述beforeActivate函數有助於防止空白部分的點擊和展開行爲。謝謝。 –

使用這種組合，它會正常工作。

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

來源

2016-08-23 09:43:57

jQuery Accordion UI空項目問題。

回答

相關問題