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

我有以下标记:

Stakeholder

Content

Relationships

Blah blah

Address

Yada yada

Contact Details

Foo bar

我创建了一个如下手风琴:

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

这个想法是有一些用例会阻止用户更改窗格,但是上面的事件取消没有效果,窗格仍然可以更改。

有没有办法防止窗格的变化? 我还尝试以编程方式激活当前窗格以防止更改,但是会触发另一个changestart事件并且所有地狱都会松动(手风琴实际上会中断)

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

适合我。

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

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

我提交了一份增强请求: Ticket 6651 。

我找到了一个在我的上下文中工作的解决方法 – 我必须在必要时通过简单地禁用h3标头(在给他们id之后)完全取消事件:

HTML:

 

Relationships

Blah blah

脚本:

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

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

但这是我发现最好的工作:

  1. 首先给出你想要禁用id disable_this的标题,或者找到一些其他方法可以选择相关的标题。
  2. 然后添加这行代码

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

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

  • 单击时停止标题突出显示的样式。

  • 使标题成为禁用样式。

更加用户友好。

我需要推导出这种行为,因为我在追逐可拖动和手风琴。 我正在为我寻找相同解决方案的人提供我的解决方案。

当标题是手风琴和可拖动的手柄时,我试图避免的行为是在拖动后触发手风琴变化。 因此,每次拖动时,它都会折叠当前展开的内容部分。

HTML:

 var $container = ('
'); var $content = ('
'); $content.append( '

Header 1

' + '
Content 1
' + '

Header 2

' + '
Content 2
' );

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' }); 

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

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

参考jsFiddle-accordion

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

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

虽然user438316有一个类似的答案,但它有太多不必要的代码, return false是一个明显的不和谐……怎么样只是:

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