Проблема с аккордеоном - Как исправить начальную ошибку открытия / закрытия на мобильном телефоне - PullRequest
Новая
       7

Проблема с аккордеоном - Как исправить начальную ошибку открытия / закрытия на мобильном телефоне

0 голосов
/ 05 сентября 2018

У меня есть сторонний разработчик, который сделал аккордеон для нашего сайта.

У меня проблема с этим.

Когда речь идет о версии для мобильных устройств - раскрывающийся список аккордеона открывается, но затем сразу же закрывается. После второго клика все работает как надо.

Это происходит во всех разделах меню.

Я не очень хорошо разбираюсь в jQuery, CSS или серверной части. Тем не менее, я могу легко обновить или изменить вещи вокруг. Кто-нибудь может мне помочь с этим вопросом.

Большое спасибо

CSS: 

button.accordion {
  cursor: pointer;
  background: transparent;
  color: $colorForeground;
  padding: ($gutter / 3);
  font-size: 1.1em;
  width: 100%;
  font-weight: 500;
  text-align: left;
  border: 0;
  outline: none;
  transition: 0.4s;
  margin: 0;
  position: relative;
}

button.accordion.active,
button.accordion:hover {
  background-color: transparent;
}

button.accordion:after {
  position: absolute;
  right: 0;
  top: 050%;
  margin-top: -7px;
  -ms-transition: 0.3s ease transform;
  -webkit-transition: 0.3s ease transform;
  transition: 0.3s ease transform;
}

button.accordion:after {
  content: url({{ 'plus.svg' | asset_url }});
}

button.accordion.active:after {
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

div.panel {
  padding: 0 18px;
  background-color: $colorHighlight;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: 0.6s ease-in-out;
  -moz-transition: 0.6s ease-in-out;
  transition: 0.6s ease-in-out;
  opacity: 0;
  margin: 0;
  .col {
    padding: $gutter/4 $gutter/2 0 0;
  }
}

div.panel.show {
  opacity: 1;
  max-height: 5000px;
}

HTML:

...