панель аккордеона не должна открываться, если условие - PullRequest
Новая
       20

панель аккордеона не должна открываться, если условие

1 голос
/ 30 апреля 2019

У меня есть аккордеон в моем файле .html.slim с двумя панелями.

  • Panel 1 имеет флажок с некоторым текстом T & C.

  • 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

Требование:

  • Панель 2 не должна открываться, пока пользователь не установит флажок на панели 1.

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');

Проблема:

При нажатии Panel 2, когда флажок на панели 1 не установленон входит внутрь if condition и возвращается, но все еще открывается Panel 2, при этом панель 1 остается открытой.Это означает, что Panel 2 не открывается с $(panel).collapse('show');, потому что, если элемент управления не возвращается из условия $('.panel-collapse.in').collapse('hide'), следует закрыть панель 1.

1 Ответ

1 голос
/ 30 апреля 2019

Это происходит потому, что 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

...