Javascript 手风琴面板不应在if条件下打开-coffeescript

我的

.html.slim

文件中有一个手风琴，有两个面板

• 面板1

  有一个带有一些T&Cs文本的复选框

• 面板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中的复选框未选中时，单击面板2，它将进入

if condition

并返回，但仍然打开面板2，同时保持面板1保持打开状态。

---

这意味着

面板2

不是从

$（面板）打开的因为如果控件没有从if条件返回（'.panel collapse.in'）。collapse（'hide'）

应该关闭面板1。

这是因为引导程序将其事件侦听器绑定到accordion

您可以通过停止事件传播来阻止这些侦听器触发

在您的情况下，您正试图停止

单击

事件的传播，但引导程序有自己的事件，当手风琴打开或关闭时会触发这些事件

你可以这样做

$(document).on "show.bs.collapse", "#collapseStepTwo, (e) ->
  if !$('#my-checkbox').is(':checked')
    e.stopPropagation()

您可以在此处了解有关引导式手风琴的更多信息：