在移动设备上单击时，jQuery手风琴跳到顶部

Question

我正在尝试在WordPress上复制this guide，但是在页面加载后，第一次点击任意切换按钮会使页面跳至顶部，然后运行正常。

这仅在移动浏览器（Chrome，Opera，而不是Firefox）上发生

我的代码：

<script>
  jQuery(document).ready(function($) {
    $('.faqs dd').hide(); // Hide all DDs inside .faqs
    $('.faqs dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
        // Add class "hover" on dt when hover
        $(this).next().slideToggle(150); // Toggle dd when the respective dt is clicked
    });
  });
</script>

.faq-wrapper {
  margin: 25px 0;
}
 
dl {
  line-height: 170%;
  margin-bottom: 20px;
}
 
dl, dt, dd {
  margin: 0;
  padding: 0;
}
 
.faqs dt {
  font-weight: 700;
  background: #f1f1f1;
  position: relative;
  padding: 6px 14px;
  margin: 15px 0;
  border-radius: 4px;
}
 
.faqs dd {
  display: none;
}
 
.faqs dd {
  padding: 0 0 15px 7px;
}
 
.faqs .hover {
  cursor: pointer;
}

<div class="faq-wrapper">
  <dl class="faqs">
    <dt>Question 1</dt>
    <dd>Answer 1</dd>
    <dt>Question 2</dt>
    <dd>Answer 2</dd>
    <dt>Question 3</dt>
    <dd>Answer 3</dd>
  </dl>
</div>