Question

我的.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。

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');打开，因为如果条件$('.panel-collapse.in').collapse('hide')应该关闭面板1时，如果控件没有返回，则

Answer 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

如果出现以下情况，则手风琴面板不应打开-coffeescript

1 个答案: