手风琴问题-如何修复手机上的初始打开/关闭错误

时间:2018-09-05 01:27:39

标签: javascript jquery html css accordion

我有一个第三方开发人员为我们的自定义网站构建了一个手风琴。

我对此有疑问。

当使用移动尺寸版本时-手风琴下拉菜单会打开,但立即关闭。第二次单击后,它应能正常工作。

这发生在所有菜单部分。

我对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:

0 个答案:

没有答案