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 将停止之前的事件将调用手风琴处理程序。

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

Answer 3

我已为此提交了一项增强请求：Ticket 6651。

Answer 4

我找到了一个在我的上下文中工作的解决方法 - 我必须在必要时通过简单地禁用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 5

问题最初被问及我使用jQuery-UI 1.11.2后几年，所以这可能不是一个有效的答案。

但这是我发现最好的方法：

首先给出要禁用标识disable_this的标题，或者找一些其他方法来选择相关的标题。

然后添加此行代码

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

早期答案中提到的一些方法（unbind("click")和e.stopImmediatePropogation()）在限制意义上对我有用，因为它们在单击标题时阻止了面板的打开。但我的方法还有两个好处：

单击时停止标题突出显示的样式。
使标题成为禁用样式。

更加用户友好。

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

我正在动态创建accordion的内容，因此在生成accordion之前绑定事件调用对我来说不起作用。所以我尝试在创建手风琴之后绑定stopImmediatePropagation，这对我来说很有用。

Answer 8

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

参考 jsFiddle-accordion

Answer 9

也许它可以在较旧的jQueryUI中使用，但是如果你使用jQuery-UI 1.9.2或更新版本，你可以在beforeActivate事件中禁用折叠式折叠;

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

Answer 10

虽然用户438316有类似的答案，但它有太多不必要的代码，return false显然是一种不和谐......仅仅是这样：

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

jQuery accordion：阻止窗格打开/取消changestart事件

10 个答案: