我的.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
需求:
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的事件监听器绑定到手风琴。
您可以通过停止事件传播来阻止这些侦听器触发。
在你的情况下,你试图阻止click
事件的传播,但bootstrap有自己的事件,当手风琴打开或关闭时触发。
你可以做这样的事情
$(document).on "show.bs.collapse", "#collapseStepTwo, (e) ->
if !$('#my-checkbox').is(':checked')
e.stopPropagation()
您可以在此处了解有关Bootstrap手风琴的更多信息:
https://getbootstrap.com/docs/3.4/javascript/#collapse-events