我的.html.slim
文件中有一个手风琴,有两个面板。
-
Panel 1
有一个带有一些条款和条件文本的复选框。 -
Panel 2
有什么#accordion.panel-group aria-multiselectable="true" role="tablist" .panel.panel-default #headingStepOne.panel-heading role="tab" .panel-title a.collapsed aria-controls="collapseStepOne" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseStepOne" role="button" | Panel 1 #collapseStepOne.panel-collapse.collapse.in aria-labelledby="headingStepOne" role="tabpanel" .panel-body .row input[ id='my-checkbox' name='my-checkbox' type='checkbox' value='my-text' required='true' ] text.mar-left-12 Accept Terms & Conditions .panel.panel-default #headingStepTwo.panel-heading role="tab" .panel-title a.collapsed aria-controls="collapseStepTwo" aria-expanded="true" data-parent="#accordion" data-toggle="collapse" href="#collapseStepTwo" role="button" | Panel 2 #collapseStepTwo.panel-collapse.collapse aria-labelledby="headingStepTwo" role="tabpanel" .panel-body .row label something
要求:
- 在用户未选中面板 1 中的复选框之前,面板 2 不应打开。
咖啡脚本
$(document).on 'click', '.panel-heading', (e) ->
panel = $(this).find('a').attr('href')
if panel == '#collapseStepTwo' && !$('#my-checkbox').is(':checked')
e.preventDefault()
e.stopPropagation()
return
$('.panel-collapse.in').collapse('hide')
$(panel).collapse('show');
问题:
在未选中面板 1 中的复选框时单击Panel 2
时,它会进入if condition
并返回,但仍打开Panel 2
,同时保持面板 1 保持打开状态。这意味着Panel 2
不会从$(panel).collapse('show');
打开,因为如果控件没有从 if 条件返回,$('.panel-collapse.in').collapse('hide')
应该关闭面板 1。
发生这种情况是因为 Bootstrap 将其事件侦听器绑定到手风琴。
您可以通过停止事件传播来阻止这些侦听器触发。
在您的情况下,您正在尝试停止click
事件的传播,但引导程序有自己的事件,这些事件在折叠琴打开或关闭时触发。
你可以做这样的事情
$(document).on "show.bs.collapse", "#collapseStepTwo, (e) ->
if !$('#my-checkbox').is(':checked')
e.stopPropagation()
您可以在此处了解有关 Bootstrap 手风琴的更多信息:
https://getbootstrap.com/docs/3.4/javascript/#collapse-events