我想将手风琴插入网页，但是每次我单击FAQ问题时，它将弹出我到移动设备页面的顶部。在PC中可以完美运行，但不能在移动设备上运行。
https://vivanks.github.io/hackoffproject/full-page/index.html#faq
就像当您单击“常见问题解答”问题时，它会弹出一个分区，它在PC上运行正常，但在移动设备上却无法正常运行。
var accordion = $('.accordion');
accordion.addEventListener("click",function(e) {
e.stopPropagation();
e.preventDefault();
if(e.target && e.target.nodeName == "A") {
var classes = e.target.className.split(" ");
if(classes) {
for(var x = 0; x < classes.length; x++) {
if(classes[x] == "accordionTitle") {
var title = e.target;
var content = e.target.parentNode.nextElementSibling;
classie.toggle(title, 'accordionTitleActive');
if(classie.has(content, 'accordionItemCollapsed')) {
if(classie.has(content, 'animateOut')){
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
}else{
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
classie.toggle(content, 'accordionItemCollapsed');
}
}
}
}
});.accordion dl {
}
.accordion dt > a {
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {
background-color: #1abc9c;
color:#fafafa;
font-size: 1em;
line-height: 1.5em;
}
.accordion dd > p {
padding: 1em 2em 1em 2em;
}
.accordion {
position: relative;
background-color: transparent;
max-width: 80%;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle {
background-color: ;
border-bottom: 1px solid #2c3e50;
}
.accordionTitle:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
background-color: #2c3e50;
}
.accordionTitleActive {
background-color:#34495e;
}
.accordionTitleActive:before {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: hidden;
text-decoration-color: black;
opacity: 1;
}
@media all {
.accordionItem {
max-height: 50em;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
}
@media screen and (min-width: 48em) {
.accordionItem {
max-height: 15em;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
.accordionItemCollapsed {
max-height: 0;
}
.animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: 0.65s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionIn;
animation-duration: 0.65s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
.animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionOut;
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
}
}
@-moz-keyframes accordionIn {
0% {
opacity: 0;
-moz-transform: scale(0.8);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@keyframes accordionIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.8);
}
}
@-moz-keyframes accordionOut {
0% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(0.8);
}
}
@keyframes accordionOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}<div id="faq" class="accordion wow fadeInDown" data-wow-duration="2s">
<h1 style="left: 50%;">FAQ's</h1>
<dl>
<dt><a class="accordionTitle" href="#">Who all can register ?</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p style="color: black; font-style: italic;font-weight: bold;">If you can innovate, you are eligible. </p>
</dd>
<dt><a href="#" class="accordionTitle">What are the registration fees ?</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p style="color: black; font-style: italic;font-weight: bold;">Great hackathons don't make you pay. </p>
</dd>
<dt><a href="#" class="accordionTitle">How much time do I have to work on my idea?</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p style="color: black; font-style: italic;font-weight: bold;">All participants can work for 24 hours on their project. The project proposals would be submitted prior to the hackathon, and the complete event is only for the developing stage. </p>
</dd>
<dt><a href="#" class="accordionTitle">How many members are required are in a team?</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p style="color: black; font-style: italic;font-weight: bold;">No one likes to be a loner. You can come in as a couple, a trio or a quad. In simple words, a team size of 2-4 members. </p>
</dd>
<dt><a href="#" class="accordionTitle">Do I keep working throughout the event ?</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p style="color: black; font-style: italic;font-weight: bold;">Of course not. IET does not like to make Jack a dully boy. We have numerous fun-filled mini-events in bag for you. Stay tuned to our FB page for detailed updates on the mini-events. </p>
</dd>
<dt><a href="#" class="accordionTitle">What if a participant is hungry ?</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p style="color: black; font-style: italic;font-weight: bold;">Eat-Code-Drink are the only objectives of the hackathon. And we'll take care of the first and last for you. Pizzas, Coffee, Snacks...you name it! </p>
</dd>
<dt><a href="#" class="accordionTitle">Who are the judges for the event ?</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p style="color: black; font-style: italic;font-weight: bold;">Only the best for you. The panel of judges include experienced proffessionals from various fields of technologies. </p>
</dd>
<dt><a href="#" class="accordionTitle">What are the prizes ?</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p style="color: black; font-style: italic;font-weight: bold;">No one is a saint here. Everyone would be here to win. And the awards are to satisfy your need- cash prizes, goodies, certificates, and a lot more awaits you this HACK OFF. </p>
</dd>
</dl>
</div>