jQuery accordion:阻止窗格打开/取消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

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

适合我.

Answer 2

在启动accordion之前,请使用您的逻辑添加自定义单击处理程序.stopImmediatePropagation将在调用accordion处理程序之前停止事件.

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

Answer 3

我找到了一个在我的上下文中有效的解决方法 - 我可以通过在必要时简单地禁用 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...
}