我的 .html.slim
文件中有一个 Accordion ,它有两个面板。
面板 1
有一个带有一些 T&C 文本的复选框。面板 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。
CoffeeScript
$(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 将其事件监听器绑定(bind)到 accordion。
您可以通过停止事件传播来阻止这些监听器触发。
在您的情况下,您试图停止传播 click
事件,但 bootstrap 有它自己的事件,这些事件在 Accordion 打开或关闭时触发。
你可以这样做
$(document).on "show.bs.collapse", "#collapseStepTwo, (e) ->
if !$('#my-checkbox').is(':checked')
e.stopPropagation()
您可以在此处了解有关 Bootstrap Accordion 的更多信息:
https://getbootstrap.com/docs/3.4/javascript/#collapse-events
关于javascript - Accordion 面板不应在 if 条件下打开 - coffeescript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55916970/