Jquery 在 Chrome 中不工作，在 Safari 和 Firefox 中不符合预期

Question

Chrome 55.0、Firefox 50.1.0、Safari 10.0.2

WordPress 4.7.1、Dynamik-Gen 2.0

http://codepen.io/grantsmith/pen/WROPXr

HTML

<article class="accordion">
 <section>
  <header><h5>When will I get my race pack with number and timing chip?</h5></header>
  <div class="accord-content"><p>You will get your race pack in the post around 2 weeks before the race.</p>
  </div>
 </section>
 <section>
  <header><h5>Is the course totally closed to traffic?</h5></header>
   <div class="accord-content"><p>Yes, the Course is completely closed roads, so no cars or pedestrians will be allowed on the run course. The town centre finish will be fenced from Regents circus right down to the finish line. There will be ample space on both sides of the fenced area for spectators and pedestrians on both sides.</p>
   </div>
 </section>

CSS

.accordion {
  margin: 0 auto;
}
.accordion header {
  cursor:pointer;
  background: #004B92;
  padding: 18px;
  border-bottom: 1px solid #00256C;
  transition: background 1.0s ease-in-out;
  -moz-transition: background 1.0s ease-in-out;
  -webkit-transition: background 1.0s ease-in-out;
}
.accordion header h5 {
  font-weight: 300!important;
  font-size: 1.8rem!important;  
  color: white!important;
  text-align: center;
  margin-bottom: 0!important;
}
.accordion .accord-content { 
  display: none;
  width:100%;
  color: #00256C;
  background-color: #fff;
  box-sizing: border-box;
}
.accord-content p {
  text-align:  center;
  padding:18px;
}
.accord-content .selected h5 {
  background: #00256C;
}
.accordion h5:after {
 content: '\002B';
 color: #fff;
 font-weight: bold;
 float: right;
 margin: 0 5px;
}
.accordion .selected h5:after {
  content: "\2212";
}

jQuery:

jQuery(document).ready (function($) {
    // run the accordion
  var allPanels = $('.accord-content').hide();
  var heads = $('.accordion header');
  $('header').on('click', function() {
      $this = $(this);
      $target =  $this.parent().find('div');
      if(!$target.hasClass('active')){
      heads.removeClass('selected');
      $(this).addClass('selected');
      allPanels.removeClass('active').slideUp();
      $target.addClass('active').slideDown();
      $('html, body').animate({scrollTop: $($target).offset().top}, 50);
      }

  });

}) (jQuery);

您好，需要指出的是，我对 Jquery 一无所知，这很可能会变得非常明显!

我正在尝试为 WordPress 页面制作 Accordion ，http://www.newswindonhalf.co.uk/half-marathon/faqs/ . codepen 中的上面代码在那里工作正常。一旦放入 WordPress/Dynamik，它就不再像 codepen 那样工作了。

问题 1:让它在所有浏览器上运行

问题 2:删除滚动，因为它当前离开了页面 View

非常感谢

Answer 1

$(document).ready (function() {
    // run the accordion
  var allPanels = $('.accord-content').hide();
  var heads = $('.accordion header');
  $('header').on('click', function() {
      $this = $(this);
      $target =  $this.parent().find('div');
      if(!$target.hasClass('active')){
      heads.removeClass('selected');
      $(this).addClass('selected');
      allPanels.removeClass('active').slideUp();
      $target.addClass('active').slideDown();
      $('html, body').animate({scrollTop: $($target).offset().top}, 50);
      }

  });

})