jQuery的手風琴：防止窗格從開/取消changestart事件

Question

我有以下標記：

<div id="accordion" class="leftaligned"> 
    <div> 
     <h3><a href="#">Stakeholder</a></h3> 
     <div>Content</div> 
    </div> 
    <div> 
     <h3><a href="#">Relationships</a></h3> 
     <div>Blah blah</div> 
    </div> 
    <div> 
     <h3><a href="#">Address</a></h3> 
     <div>Yada yada</div> 
    </div> 
    <div> 
     <h3><a href="#">Contact Details</a></h3> 
     <div>Foo bar</div> 
    </div> 
</div> 

我創建一個手風琴如下：

$("#accordion").accordion({ 
    header: "h3", 
    fillSpace: true, 
    changestart: function(event, ui) { 
     if (someConditionIsTrue()) { 
      event.stopPropagation(); 
      event.preventDefault(); 
      return (false); 
     } 
    } 
}); 

的想法是，有一些使用情況會阻止用戶更改窗格，但上述取消事件不起作用，並且窗格仍可以更改。

有沒有辦法來防止窗格的變化？我也嘗試以編程方式激活當前窗格以防止更改，但引發了另一個changestart事件，並且所有地獄崩潰（手風琴實際上打破了）

Answer 1

我發現了一種解決方法，可以在我的上下文中工作 - 避免必須通過簡單地禁用H3頭（給他們一個ID後），完全取消的情況下，必要時：

HTML：

<div> 
    <h3 id="relationshipsHeader"><a href="#">Relationships</a></h3> 
    <div>Blah blah</div> 
</div> 

腳本：

if (someConditionIsTrue()) { 
    $("#relationshipsHeader").attr("disabled", "disabled"); 
    // and so on... 
} 

Answer 2

$("#accordion .h3").unbind("click");

適合我。

Answer 3

我對此提出了改進請求：Ticket 6651。

Answer 4

在啓動手風琴之前，請在您的邏輯中添加自定義點擊處理程序。 stopImmediatePropagation將停止事件之前手風琴處理程序將被調用。

$('.quiz-qa h3').click(function(e) {  
    if ($(this).hasClass("deleted")) { 
    e.stopImmediatePropagation(); 
    return false;  
    } 
});  
$('.quiz-qa').accordion(); 

Answer 5

雖然有類似的答案由user438316，它有太多不必要的代碼，return false是一個不和諧的明顯...如何只：

$('#accordion .deleted').click(function(e) {  
    e.stopImmediatePropagation(); 
});  
$('#accordion').accordion(); 

Answer 6

我需要的這種行爲是因爲推導我正在鏈接可拖動和手風琴。我在這裏爲我的解決方案尋找相同的解決方案。

我試圖避免的行爲是在拖動時觸發手風琴改變，當頭部是手風琴和可拖動的手柄時。所以，每次拖動時，它都會摺疊當前展開的內容部分。

HTML：

var $container = ('<div id="accordion">'); 
var $content = ('<div>'); 
$content.append(
    '<h1>Header 1</h1>' + 
    '<div>Content 1</div>' + 
    '<h1>Header 2</div>' + 
    '<div>Content 2</div>' 
); 

JS：

$container.append($controls) 
.draggable({ 
    handle: ':header', 
    start: function(event, ui) { 
     $(event.toElement).addClass('ui-dragging'); 
    } 

}); 
$container.find(':header').click(function (event) { 
    var $this = $(this); 
    if ($(this).hasClass('ui-dragging')) { 
     event.stopImmediatePropagation(); 
     $this.removeClass('ui-dragging'); 
    } 
}); 
$container.accordion({ 
    collapsible: true, 
    header: ':header' 
}); 

Answer 7

我創建動態手風琴的內容，所以結合產生的手風琴之前沒有爲我工作的情況下調用。所以我在手風琴創建完成後嘗試綁定stopImmediatePropagation，併爲我制定瞭解決方案。

Answer 8

$("#accordion h3").unbind("click"); 

參考 jsFiddle-accordion

Answer 9

這是一個幾年後，這個問題最初提出和我使用jQuery UI的1.11.2所以這可能不會是一個有效的答案呢。

但是，這是我發現最好的工作：

1. 先給你要禁用的ID disable_this，或者發現你可以選擇相關的物管一些其他方式的標題。

2. 然後加入這行代碼

   $('h3#disable_this').addClass('ui-state-disabled'); 
   

一些早期的答案（unbind("click")和e.stopImmediatePropogation()）中提到的方法，在有限的意義上爲我工作，他們阻止當面板的開口標題被點擊。但我的方法有兩個額外的好處：

• 停止單擊時突出顯示樣式的標題。

• 給標題一個禁用樣式。

更方便用戶使用。

Answer 10

也許它在較老的jQueryUI中可用，但如果您使用jQuery-UI 1.9.2或更新版本，則可以在beforeActivate事件中禁用摺疊手風琴;

beforeActivate: function (event, ui) { 
    event.preventDefault(); 
}