jQuery accordion:阻止窗格打开/取消changestart事件
我有以下标记:
我创建了一个如下手风琴:
$("#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后几年,所以这可能不是一个有效的答案。
但这是我发现最好的工作:
- 首先给出你想要禁用id
disable_this
的标题,或者找到一些其他方法可以选择相关的标题。 -
然后添加这行代码
$('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();